Can you control the order in which images (hidden vs visible) on a web page are loaded?

Question

If I have two divs, one shown, the other hidden, I want the images in the visible div to load first and only then for the other hidden images to load.

Is there a way to do this?

<div class="shown">
<img src="a.jpg" class="loadfirst">
<img src="b.jpg" class="loadfirst">
<img src="c.jpg" class="loadfirst">
<img src="d.jpg" class="loadfirst">
<img src="e.jpg" class="loadfirst">
</div

<div style="display:none" class="hidden">
<img src="1.jpg" class="loadsecond">
<img src="2.jpg" class="loadsecond">
<img src="3.jpg" class="loadsecond">
<img src="4.jpg" class="loadsecond">
<img src="5.jpg" class="loadsecond">
</div>

Answer 1

The browser should be requesting the images in the order that the markup lists them in. So it would ask for a.jpg, b.jpg, etc.

If you don't want the hidden DIV images to load with the page then you would have to insert that HTML from the client side once you want the images loaded.

Answer 2

If all the images are embedded within a single image map, then all images will load at the same time. That solves issue of the "literal load order". Thats a bit complicated though and a totally different issue that you might want to skip for now ( http://www.alistapart.com/articles/imagemap/ ).

But, for the "apparent load order" you start with a DIV with <DIV id="1" style="visibility: hidden"> option. Then use a for loop to change the visibility of the DIVs in order.

for (var=0;var<=10;var=var+increment) {
document.getElementById(var).style.visibility = 'visible';
}

Also, maybe an approach using layers: http://jennifermadden.com/javascript/dhtml/showHide.html

I think there are ways to dynamically load an additional CSS file (when you are ready to load images): http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS

Answer 3

Some, if not most, browsers do this automatically. If images are hidden then they are not downloaded.

Answer 4

As others have said, it all comes down to which images are listed first in the html markup.

But, something that may help with this problem is to display a loading spinner until all of your images are fully loaded.

You could do this with JQuery, as in this example.

http://jqueryfordesigners.com/image-loading/