www.webdeveloper.com
+ Reply to Thread
Results 1 to 11 of 11
  1. 04-05-2012 03:34 PM #1
    js_newbie_80
    js_newbie_80 is offline Registered User
    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
    Reply With Quote Reply With Quote
  2. 04-05-2012 04:24 PM #2
    Padonak's Avatar
    Padonak
    Padonak is offline Everything is spam!
    Join Date
    May 2006
    Location
    Russia, Rostov-on-Don
    Posts
    1,153
    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";
    use [code]YOUR CODE GOES HERE[/code] or burn in Hell
    Reply With Quote Reply With Quote
  3. 04-05-2012 05:33 PM #3
    Angry Black Man's Avatar
    Angry Black Man
    Angry Black Man is offline How about THAT!
    Join Date
    May 2005
    Location
    Dirty Jersey
    Posts
    1,395
    Quote Originally Posted by Padonak View Post
    x = x + 1; my wife calls it "absurd"
    ever shown her "x+=1"?

    1. If you reply to my post, and your reply would then appear directly beneath my post, DON'T QUOTE MY ENTIRE POST!!! IT'S REDUNTANT!!! IT'S ASININE!!!! IT'S REDUNDANTLY ASININE!!!!! DON'T DO IT!!!!
    2. jQuery extends the functionality of JavaScript. If you don't know JavaScript, give up on that jQuery script and learn JavaScript. You'll save yourself a lot of frustration, I promise.
    3. Use the [code][/code] tags. Otherwise, you may be left wondering why no one responded to your eyesore of a thread.
    Reply With Quote Reply With Quote
  4. 04-06-2012 06:49 AM #4
    js_newbie_80
    js_newbie_80 is offline Registered User
    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
    Reply With Quote Reply With Quote
  5. 04-06-2012 04:25 PM #5
    Padonak's Avatar
    Padonak
    Padonak is offline Everything is spam!
    Join Date
    May 2006
    Location
    Russia, Rostov-on-Don
    Posts
    1,153
    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?
    use [code]YOUR CODE GOES HERE[/code] or burn in Hell
    Reply With Quote Reply With Quote
  6. 04-06-2012 05:51 PM #6
    handcraftedweb
    handcraftedweb is offline Registered User
    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.
    Reply With Quote Reply With Quote
  7. 04-08-2012 01:04 AM #7
    Troy III
    Troy III is offline Registered User
    Join Date
    Jan 2011
    Posts
    110
    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.
    Reply With Quote Reply With Quote
  8. 04-08-2012 01:56 AM #8
    Jeff Mott's Avatar
    Jeff Mott
    Jeff Mott is offline Super Moderator
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,498
    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";
    Reply With Quote Reply With Quote
  9. 04-09-2012 06:24 AM #9
    js_newbie_80
    js_newbie_80 is offline Registered User
    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
    Reply With Quote Reply With Quote
  10. 04-10-2012 12:21 AM #10
    holyhttp's Avatar
    holyhttp
    holyhttp is offline Registered User
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    494
    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.
    Web Developer SF Bay Area, CA - Hands-on Training Online - Custom Blog Design
    Reply With Quote Reply With Quote
  11. 04-10-2012 02:44 PM #11
    js_newbie_80
    js_newbie_80 is offline Registered User
    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)
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

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

     

Bookmarks

Posting Permissions

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

Forum Rules

 HTML5 Development Center



Recent Articles