homepage Welcome to WebmasterWorld Guest from 54.226.43.155
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
script running slow
dupalo




msg:4437182
 6:47 pm on Apr 4, 2012 (gmt 0)

HI there I have run into a strange problem.
I have a photo website and a script which gets fired on body onload. Now this script tests for javascript on/off and if it is off the pictures are displayed all in the page, if it is on they are handled by javascript. The curious thing is that with javascript enabled when I land on this page for less than a second I can see all the pictures on the page (as if javascript was off) but then it picks up the script and everything is fine. I wonder if the performance of the scrip depends on the face that it is fired on page load. Here are the relevant bits:
external script (javascripts/no_script.js):

function no_javascript(){
//thumbnails
document.getElementById('thumbnail_1').style.display='block';
document.getElementById('thumbnail_2').style.display='block';
document.getElementById('thumbnail_3').style.display='block';
document.getElementById('thumbnail_4').style.display='block';
document.getElementById('thumbnail_5').style.display='block';
document.getElementById('thumbnail_6').style.display='block';
document.getElementById('thumbnail_7').style.display='block';
document.getElementById('thumbnail_8').style.display='block';

//big images
document.getElementById('image1').style.display="none";
document.getElementById('image2').style.display="none";
document.getElementById('image3').style.display="none";

//big images repositioning
var big_images = document.getElementById('full_images');
big_images.style.position = "fixed";
big_images.style.margin = "-245px 0 0 -350px";
big_images.style.display = "none";
big_images.style.backgroundColor = "black";
big_images.style.color = "white";

//descriptions
var description1 = document.getElementById('description_1');
var description2 = document.getElementById('description_2');
var description3 = document.getElementById('description_3');

description1.style.display = "none";
description2.style.display = "none";
description3.style.display = "none";

}


and here are the relevant html bits:

...
<head>
<script type = "text/javascript" src = "javascripts/no_script.js"></script>
<head>

...

<body onload = "no_javascript()">
...
</body>
....

Does anybody have any suggestion?
thanks

 

Dijkgraaf




msg:4437287
 12:08 am on Apr 5, 2012 (gmt 0)

As you say, the JavaScript doesn't fire until the page has finished loading, this includes all the images.

What exactly are you trying to achieve? It looks like you are loading both thumbnails and larger versions and then hiding the large ones when the page is loaded and JavaScript is enabled, and this doesn't sound like what you intend.

daveVk




msg:4437348
 6:42 am on Apr 5, 2012 (gmt 0)

All images are loaded unconditionally.

If javascript is off, then NO javascript if executed end of story.

If javascript is on, it alters the page as you describe, after page and images are loaded.

dupalo




msg:4437450
 12:21 pm on Apr 5, 2012 (gmt 0)

@Dijkgraaf, yes that's correct the page loads all the big images and hides the thumbnails through css. Then if the javascript is off nothing changes. If it is on it unhides the thumbnails and hides the big images that will be invoked through script. So in short: when javascript is off the user will see only the big images, one below the other. When it is on, the user will see the thumbnails and by clicking on it javascript/jquery brings up the big picture. The issue I am having is that for a fraction of a second - assuming javascript on - when I load the page I see all the big images one below the other as if javascript was off. I wonder what I can do to avoid this problem

@daveVk, yes sure the images will load but I somehow need to hide them before they load or quickly enough so that the screen doesn't flick the big images at me.

Fotiman




msg:4437464
 1:08 pm on Apr 5, 2012 (gmt 0)

Here's what I would suggest. Give your <html> tag a class of "no-js":

<html class="no-js">

In the head of your page, include a small snippet of JavaScript that replaces that class with "js". Modernizr [modernizr.com] will do this for you. This will happen before the rest of your content loads. Then instead of using JavaScript to set the display style, include CSS like the following:

.js #image1,
.js #image2,
.js #image3,
.js #full_images,
.js description_1,
.js description_2,
.js description_3 {
display: none;
}

dupalo




msg:4437674
 7:39 pm on Apr 5, 2012 (gmt 0)

hi fotiman, how do I go about that? I mean what do I do exactly with modernizr?
You suggested to add a little script in the head, so I wonder if I move my current script in the head would that solve the problem do you think?
thanks

Fotiman




msg:4437702
 8:33 pm on Apr 5, 2012 (gmt 0)

No, moving your current script to the head would not work, because it works directly on elements. And those elements don't exist yet in the head.

To use Modernizr, just include the modernizer script in your head and add the CSS.

dupalo




msg:4440145
 6:29 pm on Apr 12, 2012 (gmt 0)

thanks

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved