If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

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):

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.

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

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.

Originally Posted by Troy III

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

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.

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)