Order of loading images in html and css

Question

Hello,

can I programatically (or, as we're speaking about html and css, semantically) decide in which order should images load?

I want to make background image load first and then call som javascript upon $(window).load, is it enough to leave it on browser (e.g. body-background is on line 40, other images are later in css file) or do I have to use javascript (and if yes, is there some simple solution?)

Thank you.

Edit: The reason is that I could display notice 'loading...' while loading images, but the parts loaded first won't make sense without at least seeing the background, so background has to be loaded first.

Answer 1

The request for the image starts as soon as the browser's parse engine finds the url, but it's not guaranteed to be downloaded before other resources have finished downloading. I'm not sure why you need the background to be completely downloaded before you load other resources?

Oh, and the onload-event for the whole document is triggered once ALL resources are downloaded.

Answer 2

How about dynamically loading images using javascript? Then you can be sure which order it is loaded. Make sure that the script is loaded first.

Answer 3

There's no reliable method. Using JavaScript would mean the images would never load for users who have scripting disabled or browsers that don't support it.

Almost all external resources (one of the exceptions being scripts) of a page are loaded asynchronously, starting as they are parsed by the browser. This means that it's most likely going to be the smaller files that load first, with the larger files taking longer to download and display.

It might be possible for you sprite all the smaller images into a single image which would make the file size larger so they would all show at the same time (instead of consecutively), but I wouldn't whole-heartedly recommend it for any normal page. The process simply involved adjusting the background position to show only the image you want from the collection. If the collection size is larger than the background image and the background image begins downloading first, there's a good chance the background will render before the images.

Answer 4

why don't you use some js to load background image before other images load.

Answer 5

You can use an onload event on the first image to load the next ones) and so on.

img1.src = 'url1';
img1.onload = function(){
  ...
  img2.src = 'url2';
  img2.onload = function(){
    ...
  }
}