Load images on page first?

Trickster

I have a gallery on my site and i'm using a dhtml script to show them when an image is clicked... the problem is that when you go to the gallery and press an image, before every image in the gallery is loaded, then it doesn't show it with the dhtml script, but instead on a white page like normally..
So how can I make sure that the images are before the user clicks on an image..?

Mosquito.Tyler

I think what your trying to do is ensure that every image is loaded before a user can click on any of them.

I don't have time to test anything now, but I'll throw a couple Ideas at you.
I don't know if this will work.

Try having all your images in a div, and hide it with styles...

Trickster

hmm guess that is to complicated for me Razz

well then i'll just let it be.. ty anyways

chasbeen

I found that most people have problems waiting for the images to download.
(You cannot stop this as it's single thread)

However a partial solution is as follows

On all your images put an "onload" event on the image tag as shown below.

<img src=testing12.jpg name= 'testing12' onload='incrementProgress();' >

//Here is the function each image calls as it loads..

function incrementProgress() {
progress++;
document.getElementById("progressIndicator").style.width = ((progress/progresslength)*100) + "%";
if(progress==progresslength)
{
document.getElementById("progressText").innerHTML ='Images loaded:Proceed with blah blah';

}
}

Note that this function draws a progress bar which stops them getting board. At the end it says "Images Loaded" (You have to set up your progress bar as follows:

<tr><td>
<center>
<div id="progressBar">
<div id="progressIndicator"></div>
<div id="progressText">Loading Images...please wait.</div>
</div>
</center>
</td></tr>

You said "how can I make sure that the images are before the user clicks on an image"

The answer is to disable things until that particular image(or all images) is/are loaded. Use the "onload" event to give your user a progress bar and prevent the action until the progress bar has completed.

Let me know if you can implement this...

Smile

chasbeen

Trickster,

here is an example,

http://www.chasbeen.frih.net/hhhhhhh.html

How fast is your computer.

Click on the multi-coloured ball (or any image)

BTW Where is your web-site?

Kaneda

The problem is that the window's onload event doesn't fire until all content has been downloaded - including images. This means that if your script initializes the gallery in an onload handler, that won't happen until all images have been downloaded.

When you need to access (and modify) the HTML DOM, you'll have to do it in such an event, to ensure the DOM has actually been loaded before trying to manipulate it. The only standard event provided for such is window.onload - it would be much smarter, if there was an event triggered when the HTML has been loaded and parsed, but BEFORE images (and Flash etc.) start loading. And now there is Smile

Dean Edwards found a pretty much completely cross browser way to do it:

http://dean.edwards.name/weblog/2006/06/again/

Look at comment no. 5 for a complete script. I (and others) have implemented it as an event on the same level as window.onload or element.onclick. But in Dean's example, you just move anything normally called in a window.onload handler - and which doesn't need the images to have been loaded (as in, the actual images - the <img> tags will already be there, ready to be manipulated) - into the init() function. (where Dean writes "// Do stuff".

How it works:

- For Mozilla (Firefox, Netscape, Mozilla etc.) and Opera 9, it uses their builtin extension event "onDOMContentLoaded".

- For IE, it uses the fact that IE will load an external script with the "defer" attribute right after the DOM has been parsed - and that such a script has an "onreadystatechange" event and readyState property to check when it loads. The script gets around actually loading an external script by some script tag standard trickery.

- For Safari and Konqueror, it uses the document.readyState value polled in an interval.

- For any other browser, it falls back to using window.onload (Dean uses the fast, slobby way, since his is just an example - it can easily be implemented with an addEvent() script).

So, what that gives you is a "real" window.onload event, which is fired before images and other binary content on the page (Flash, for example). That way, you'll usually get javascript parts of the page to respond in about 30-50 milliseconds, rather than in 3-20 seconds (depending on the size of your images) Smile

Trickster

Thank you all a lot for the answers, and for now I will save all the information, because the site has not been published yet.. I will wait and see responds for this problem by the users, and if it bothers the users i will try using the codes Wink

Trickster

Okay I have now uploaded the website, but it seems to be xtremly slow to load, just the index page.. It has about 750kb of images to load, and I was just wondering if that is a lot!?
To me it seems to be little but idk.. Also the gallery with the images takes so much time to load, but theres also about 19mb of images.. they are scaled down to 150x150 and when clicked they expand to their normal size with the special image viewer.
Even when I have been to the site (index) and I close it and open the site again (just the index) it still takes some time to load it all up, even though it should have saved the images on the computer?
The rollover images in the menu is very slow too, even after they are loaded, it still takes about 2 sec's before it switches to the other image when moved over.

I need to know how to speed things up a lot.. I guess the image gallery always will be slow, but i think it could be faster somehow..
If the answer to this problem still is to use some of the codes in the posts above, then please tell which code would be the most prefered.
- "Jeg tror det er nemmere, hvis du kunne forklare det på dansk i en PM Kaneda, hvis du har tid".

EDIT: I've just tested with Firefox and Opera, and it loads up pretty much faster than it did with IE, but in firefox and opera it changes the bg color the site on "laying" on, and bit strange things between the bottom frame and middle frame idk.. maybe I can fix that...
But I don't think it should be required to have enything else than IE to view the site?!