The order of loading images in html and css

Question

Can I programmatically (or, speaking of html and css , semantically) in what order should the images be loaded?

I want to download the background image first, and then call som javascript on $(window).load , is it enough to leave it in the browser (for example, body-background is on line 40 , other images are later in the css file) or do I need to use javascript ( and if so, is there any simple solution?)

Thanks.

Edit: the reason is that I can display "loading ..." when loading images, but at first the downloaded parts do not make sense, at least not seeing the background, so you need to download the background first.

Answer 1

There is no reliable method. Using JavaScript will mean that images will never be downloaded for users who have disabled scripts or browsers that do not support it.

Almost all external resources (one of the exceptions being scripts) of the page are loaded asynchronously, starting with how they are analyzed by the browser. This means that, most likely, these will be smaller files that are downloaded first, and large files take longer to load and display.

Perhaps you will sprite all smaller images into one image, which will make the file size larger so that they all appear at the same time (instead of sequential), but I would not recommend it for any normal page with all my heart. The process simply included adjusting the position of the background to display only the image you want from the collection. If the collection is larger than the background image and the background image starts loading first, there is a good chance that the background will be displayed in front of the images.

Answer 2

I found this to be an effective trick:

• Preload the image using JS, which you post at an early stage of the DOM:

   <script type="text/javascript"> (new Image()).src="../img/loader.gif"; </script> 

• Place the element you want to load as high as possible in CSS.

• Download your CSS as early as possible by placing it higher in the DOM

Answer 3

The image request starts as soon as the browser parser finds the URL, but it cannot be loaded before other resources have finished loading. I'm not sure why you need to fully download the background file before downloading other resources?

Oh, and the onload event for the entire document is fired after ALL resources are loaded.

Answer 4

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

Answer 5

You can use the onload event in the first image to load the following), etc.

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