www.webdeveloper.com
Results 1 to 11 of 11

Thread: my javascript is slow - where to position it to optimize performance

  1. #1
    Join Date
    Feb 2011
    Location
    London
    Posts
    62

    my javascript is slow - where to position it to optimize performance

    HI there, I am having a problem with a script on one of the site I am building.
    Here's the problem. This is the page I am talking about http://antobbo.webspace.virginmedia....test/egypt.htm
    If you load it or ctrl f5 you will see for no longer than a fraction of a second that it displays the pictures before displaying the thumbnails. I was trying to optimize it for non javascript users and therefore if you have javascript off when you load the page you will see the big pictures only, one below the other one. The thumbnails disappears as well (through css display:none. If javascript is on, you can see the thubmbnails and by clicking on the thumbnails you access the big picture.
    What's annoying me is this quick flick that happens on page load, and I am pretty sure that's due to the fact that, on javascript enabled, I call the function from the body of the page body onload=...
    Here is the relevant bits of code.
    external script (javascripts/no_script.js):

    Code:
    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";
    
    }
    HTML
    HTML Code:
    ...
    <head>
    <script type = "text/javascript" src = "javascripts/no_script.js"></script>
    <head>
    
    ...
    
    <body onload = "no_javascript()">
    ...
    </body>
    ....
    CSS
    HTML Code:
    .main_categories .thumbnail_1, .thumbnail_2, .thumbnail_3, .thumbnail_4, .thumbnail_5, .thumbnail_6, .thumbnail_7, .thumbnail_8
    {
    	display:none;
    
    }
    What do you reckon I should do to fix the issue and to make sure that the script hides the pictures before they are loaded?
    thanks

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    why not to define these styles in css?
    Code:
    //big images
    document.getElementById('image1').style.display="none";
    document.getElementById('image2').style.display="none";
    document.getElementById('image3').style.display="none";
    ...
    //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";

  3. #3
    Join Date
    May 2005
    Location
    Dirty Jersey
    Posts
    1,402
    Quote Originally Posted by Padonak View Post
    x = x + 1; my wife calls it "absurd"
    ever shown her "x+=1"?

  4. #4
    Join Date
    Feb 2011
    Location
    London
    Posts
    62
    Quote Originally Posted by Padonak View Post
    why not to define these styles in css?
    The image1, image2 and image3 represent the big images. I can include them in the css sure but I need them to be visible when javascript is turned off, so in the css I can have sth like
    HTML Code:
    #image1, #image2, #image3{display:block};
    but that won't help me that much I don't think. Same story with the descriptions they need to be available when javascript is off so I still need the below script to hide them away when javascript is on.
    I don't know if you click on the thumbnails/switch javascript off to see the functionality, sorry maybe I wasn't explaining it correctly
    thanks

  5. #5
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    Quote Originally Posted by Angry Black Man View Post
    ever shown her "x+=1"?
    if i even try to tell her about such things she may become very dangerous... have you ever seen a shark in attack mode?

  6. #6
    Join Date
    Aug 2010
    Location
    San Diego
    Posts
    242
    You could re-architect it. First create a site that works as well as it can without JavaScript, then add a JS file that will do some manipulation and add the dynamic features.

  7. #7
    Join Date
    Jan 2011
    Posts
    123
    You'll need an organic-like approach for it to be fast enough.
    The onload event is not suitable for this kind of task.

    (presuming that initial "main_categories" css is display: none
    and that of "full_images" css is display: block , or undeclared).

    Code:
    <div class="main_categories"  id="main_categories">...</div>
    <script>document.getElementById("main_categories").style.display="block"</script>
    
    <div class="full_images"  id="full_images">...</div>
    <script>document.getElementById("full_images").style.display="none"</script>
    This is the fastest and the most reliable method possible. And you can spare your onload event for some other important task.

  8. #8
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    Quote Originally Posted by js_newbie_80
    Quote Originally Posted by Padonak
    why not to define these styles in css?
    ...I need them to be visible when javascript is turned off
    A handy way to deal with that is to use JavaScript to set a class on the HTML element.

    Code:
    <script>
        document.documentElement.className = 'js-enabled';
    </script>
    Now in your CSS, you can write:

    Code:
    .js-enabled #image1,
    .js-enabled #image2,
    .js-enabled #image3 {
        display: none;
    }
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

  9. #9
    Join Date
    Feb 2011
    Location
    London
    Posts
    62
    Troy III, I will give this a go then. One thing, if the onload is not effective, should I remove the script from the body, leave it in the head section and then call the function from the script? Then I will amend the script accordingly to what you have said.
    Quote Originally Posted by Troy III View Post
    You'll need an organic-like approach for it to be fast enough...
    @handcraftedweb I appreciate what you're saying but I can't rebuild the whole website. I know I made a mistake, but lesson learned for next time, now I need to try to amend it the best way

    @Jeff Mott thanks for that I will try Troy III's solution, if I can't implement that I will try to do yours, thanks

  10. #10
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    Your no_javascript() function executes only after the no_script.js file is entirely loaded which means at that point all the HTML is in place and image1,.., image3 are already started loading.
    * Use CSS to turn OFF what non-JavaScript users should not see.
    * Use Javascript to turn ON the features javascript-enabled web browsers would show.

  11. #11
    Join Date
    Feb 2011
    Location
    London
    Posts
    62
    Quote Originally Posted by holyhttp View Post
    Your no_javascript() function executes only after the no_script.js file is entirely loaded which means at that point all the HTML is in place and image1,.., image3 are already started loading.
    .
    Thanks for that, so is it better if I remove the onload call and call the function from inside the javascript itself?

    * Use CSS to turn OFF what non-JavaScript users should not see.
    * Use Javascript to turn ON the features javascript-enabled web browsers would show
    that's what i attempted to do. The css removes the thumbnails and shows the full images, and the javascript shows the thumbnails and hides the big pictures (that will be then brought up when you click on the thumbnails)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles