View Full Version : Loading Images in a certain order

08-21-2008, 09:03 PM
Sorry I assume this has been discussed, but I couldn't find anything quite what I needed from searching the forums...

Basically I'm loading lets say... 50 images on a single page, all are display:none, except for the first one... , so you don't see the images as they load, but they are loading for a while in the background.

I need to load the images in a particular order, not just the order they appear in the HTML, so say I need to load the first 3 images of the 'doodles' section, the 'illustrations' section and the 'life' section.... then after the first 3 of each of those sections are loaded, continue loading the other images after those priority images are loaded.

Is there a decently lightweight/easy way to do this?



Philip M
08-21-2008, 09:45 PM
Have a look at:-


The problem is that this will only work if the user has Javascript enabled in his browser. Another approach is:-

A ) Regardless of where the image appears in the layout, make sure that it appears before all others in the HTML markup code of the page.


B ) Download all of your images that appear on the page. Then delete them all from the server. Then upload them to the server, one at a time, in the order in which you want them to be served.

Quizmaster: In Roman Catholicism, baptism, confirmation and matrimony are three of the seven what?
Contestant: Deadly sins.

rnd me
08-21-2008, 10:20 PM
two routes:

1. the simple way:
pre-cache all the important images in the document's head, so they are virtually guaranteed to be cached when img tag in the body finds it.

2. replace all the img tags with a span with a unique id. once the page loads,
an onload script then starts adding the images in a loop in the background.
you would code a list of image paths and the id of the span that the image goes in.
eg: images = {bob1: "bob.jpg", bob2: "bob2.jpg", bob3: "bob.png"} ...

the scond example, while it requires more work up front, ultimatly gives you a lot more control, and flexibility later. you could only load up some images, or not start loading the images until the section is activated, etc...

just a simple loop loading the images upon boot will dramatically increase the perceived performance of the page. the page will be usable almost instantly.
you may have noticed that browsers get stuck loading images, even if they are invisible. this would totally fix those issues.

for users without javascript, if you care, save a copy of the page you have now called indexNOJS.htm (or whatever). you can then place a simple meta redirect tag in a no-script tag in the head that redirects users without javascript to the regular, slow loading html page.

if you only need to guarantee 5-10 images will be there, use the first trick.
i could whip up some code for either one if you need, but there's lot of examples, and the preloading process should be very simple; 5 lines of code max.

i just thought of an alteration to the second example.
to reduce the amount of work on your part:
you could simply move the url from each img tag's .src attrib to the title, alt, or a made-up attrib.
then the image loader simply finds the images, and change the .src to the .alt (or whatever).
that way, you wouldn't have to build the annoying image index, making it fast and easy to implement.

09-01-2008, 08:49 AM
rnd me, how would I do the 'simple way' ? If you could throw up some example code for that, that would be awesome! Thanks,


Philip M
09-01-2008, 09:50 AM
Place the following script in the <head> section of your page:-

<script type = "text/javascript">
if (document.images) {
pic1= new Image(100,25); // width and height of image
pic1.src="http://someplace.com/image1.gif"; // url of image source

pic2= new Image(240,55);

pic3= new Image(88,31);

Adjust your width, height, and url values accordingly. Obviously you can preload more images if you wish.

The one thing that unites all human beings, regardless of age, gender, religion, economic status, or ethnic background, is that, deep down inside, we all believe that we are above-average drivers.