Order of loading images in html and css
Solution 1
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.
Solution 2
I found this to be an effective trick:
-
Preload your image with JS that you place early in the DOM:
<script type="text/javascript"> (new Image()).src="../img/loader.gif"; </script>
Place the element you want to load first as high up in the CSS as possible
Load your CSS as early as possible by placing it higher in the DOM
Related videos on Youtube
Comments
-
Adam Kiss almost 2 years
can I programatically (or, as we're speaking about
html
andcss
, 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 line40
, 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.
-
Andy E about 14 yearsAnd users with JavaScript off would never see them.
-
Adam Kiss about 14 years@Andy E - yes, that's problem
-
Adam Kiss about 14 yearsThe 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.
-
Adam Kiss about 14 yearsI actually successfully use Sprite technique with grouping color-similar images into PNG-8 :)
-
Michael Butler over 11 yearsif you're smart enough to disable JavaScript in your browser, you're smart enough to enable it to see rich content on sites of your choosing :)
-
Mic over 11 years@MichaelButler, Thanks I'll use this phrase the next time someone comes to hit me with the "no JS users"
-
oak about 10 yearsits kinda old but the risk here have img1 to be failed. what you can do instead is to have a counter flag on each loading image (and also on failed) images and then shows them by order
-
baash05 about 10 yearsMost users (sorry) are not smart enough to turn off java script, and some browsers safari and android browser make it a real task