Loading Order of Images

**dog** · 12-01-2006, 03:55 PM

Can anyone tell me what dictates the order in which images load in a web page?

Do images defined by an external CSS file load after the images defined by the HTML?

In this example there are a lot of heavy images that are initially hidden. They are defined in the HTML.

There are also some very light images used for the page's borders and heading. These are defined in an external css file.

Ideally I'd like the hidden images to only start loading once the rest of the page is ready.

How might this be acheived?

...And where might I learn more about the order in which a browser reads and loads a page?

**mwinter** · 12-01-2006, 07:29 PM

Originally Posted by dog

Can anyone tell me what dictates the order in which images load in a web page?

I'm not aware of any concrete rules, but logic would suggest the order in which they are encountered.

Do images defined by an external CSS file load after the images defined by the HTML?

Generally. Though the style sheet will be encountered before any img elements, there will be a delay whilst the style sheet itself is retrieved. By that point, a substantial amount of the document may have been parsed, and several images will have been queued.

If there are a lot of images, or the document is large, images referenced by the style sheet may end up on the request queue before all img elements - it's a race, in effect.

There are also some very light images used for the page's borders and heading. These are defined in an external css file.

Ideally I'd like the hidden images to only start loading once the rest of the page is ready.

How might this be acheived?

If the images were referenced by an embedded style sheet, they should get on the queue first. You could use a script to load the images, too, though that's much the same as the first suggestion. You might even be able to stall transmission of the document using PHP and the like, though that would depend upon network conditions.

And where might I learn more about the order in which a browser reads and loads a page?

Not sure, but I would expect a first-come, first-serve approach: external resources are added to a queue as they're encountered and requested in order, balanced over open connections. Style sheets and the like a probably processed asynchronously, so the request queue will be constantly updated by various sources.

Mike

**dog** · 12-01-2006, 07:36 PM

Thanks Professor

If the images were referenced by an embedded style sheet, they should get on the queue first.

Cool. I'll give that a go and post back with the results.

You might even be able to stall transmission of the document using PHP and the like, though that would depend upon network conditions.

Sounds interesting. Could you elaborate a little? Perhaps aiming your response at someone who know very little about PHP but is just getting into PHP for the first time.

dog

**mwinter** · 12-02-2006, 12:44 AM

Originally Posted by dog

Originally Posted by mwinter

You might even be able to stall transmission of the document using PHP and the like, though that would depend upon network conditions.

Sounds interesting. Could you elaborate a little?

One might output everything up to the body element, wait, then output the rest:

PHP Code:


<!-- ... -->

</head>

<?php

flush();

sleep(1); // Pause for a second

?>

<body>

<!-- ... -->

If the style sheet hasn't been received and parsed, the images in the body element may enter the queue earlier. Getting the delay right is probably impossible as network conditions will vary.

Whether the head element is even sent to the browser may depend upon the server: the latter may still choose to buffer the data. Any output buffers introduced using the ob_start function or the PHP configuration would have to be flushed, too, using the ob_flush or ob_end_flush functions.

As is, the code above isn't recommended as its destroys the cacheability of the document since PHP won't send cache-related headers on its own initiative. It also prevents the use of persistent connections as a Content-Length header won't be sent, requiring the connection to be severed to indicate the end of the data stream.

I didn't consider in my previous post that background images won't be requested until there's a perceived need for them: if the element that uses the background occurs near the end of the document, the image won't be queued until that element is encountered.

Mike

**dog** · 12-02-2006, 04:29 PM

Thanks Mike,

I can't say that I understand all of the PHP ideas above. It sounds like it would be complicated to use PHP to control the loading order.

With what you mentioned above about the loading queue I've seen a lot I can do to better organise the CSS.

I had one external CSS file for the whole site. This may mean all the images called by the CSS are being loaded by every page. Is that right?

I'm going to seperate the CSS to page specific CSS files. They won't contain any images so I'll leave them as external files and I'm sure they'll load quickly enough.

The images that I want to load quickly are called by CSS that's common to all the pages. However I'm going to put this in the Head of each page in the hope that the images enter the queue before the heavy images in the HTML.

I'll let you know if this speeds things up.

dog

**dog** · 12-02-2006, 05:51 PM

I've given that a go now and it seems to work.

However, testing it is proving to be another problem.

The first time I went to the page I could see all the images loading one by one. Now that they've loaded once they appear almost instantly on the page and don't give any clue to the order in which they're arriving.

I assume that the browser stores them somehow. Does anyone know how and where so that I can delete them and watch them appear one by one again?

**mwinter** · 12-02-2006, 06:37 PM

Originally Posted by dog

I can't say that I understand all of the PHP ideas above. It sounds like it would be complicated to use PHP to control the loading order.

It would, and not particularly reliable. Just presenting options...

I had one external CSS file for the whole site. This may mean all the images called by the CSS are being loaded by every page. Is that right?

Potentially, but it doesn't look like browsers act that way. Instead, the rule has to be used by the document in order for any referenced resources to be loaded.

Code:

#foo {
    background: #000000 url(large-image) no-repeat;
}

If there is no element with the id attribute value, foo, the background image will never be loaded. If the attribute value does exist, the image won't be loaded until at least the start-tag for that element is parsed.

I'm going to seperate the CSS to page specific CSS files.

You could, but I'd only recommend it is the style sheet is large and perhaps getting awkward to maintain. Be sure to place common rules into a single style sheet and import that, rather than duplicating them in each individual style sheet.

Originally Posted by dog

The first time I went to the page I could see all the images loading one by one. Now that they've loaded once they appear almost instantly on the page and don't give any clue to the order in which they're arriving.

I assume that the browser stores them somehow.

Yes, usually. Browsers usually have caches that store a certain amount of data. It can then query the server to find out if the data has changed before downloading it; if it has the same content, it saves time and network usage. Machines between you and the origin server may also act as caches.

Mark Nottingham has written a good caching tutorial.

Does anyone know how and where so that I can delete them and watch them appear one by one again?

You can, but how varies slightly between browsers. Tell us what you're using and we might be able to guide you to the right place.

Mike

**dog** · 12-02-2006, 06:41 PM

Does anyone know how and where so that I can delete them and watch them appear one by one again?

You can, but how varies slightly between browsers. Tell us what you're using and we might be able to guide you to the right place.

I'm using Firefox... version 2.0

**mwinter** · 12-02-2006, 06:53 PM

Originally Posted by dog

I'm using Firefox... version 2.0

Then from the Tools menu, select the "Clear Private Data..." option. Deselect all of the options except "Cache" and activate the "Clear Private Data Now" button. If an option is disabled, none of that sort of data exists.

This will clear the entire cache. I'm not sure of a way to be more selective: file names in the cache directory are munged.

Mike

**dog** · 12-03-2006, 02:59 AM

Hi Mike,

from the Tools menu, select the "Clear Private Data..." option. Deselect all of the options except "Cache" and activate the "Clear Private Data Now" button.

That worked perfectly, thanks. Now I can get a good look at the order in which the images are arriving.

All of the CSS called images are in the queue behind all of the HTML referenced images.

Even if I use CSS internally it makes no difference.

I tried the PHP you suggested:

PHP Code:


<!-- ... -->

</head>

<?php

flush();

sleep(10); // Pause for ten seconds

?>

<body>

<!-- ... -->

Note: I've changed the delay to ten seconds to really notice what happens.

It takes an extra 10 seconds for the browser to arrive on the page but when it does arrive none of the images are already loaded.

I'm guessing this is because of what you mentioned earlier:

If there is no element with the id attribute value, foo, the background image will never be loaded.

Since all of the element are in the body the page sleeps before calling any of the images.

I'm going to try placing this PHP part way through the body to see what happens but I really don't know what I'm doing with PHP.

Thread: Loading Order of Images

Thread Tools

Search Thread

Loading Order of Images

Image loading order

Bookmarks

Bookmarks

Posting Permissions