Menu
Note: If you are reading this for the fist time, you may jump directly to the UPDATE, since it addresses the issue more accurately.
So I got a web-page.
In the head I have a CSS background-image:
<style>
#foo { background-image:url(foo.gif); }
</style>
At the bottom of the page I load my scripts:
<script src="jquery.js"></script>
<script src="analytics.js"></script>
Since the scripts are located at the bottom of the page, and the CSS at the top of the page, I assumed that browsers will load the image first. However, this seems not to be the case.
This is a screenshot from the Chrome Dev Tools:
http://www.vidasp.net/media/cssimg-vs-script.png
As you can see, the image loads after the scripts.
(The vertical blue line is the page load DOMContentLoaded event. The huge 45ms gap is the time in which Chrome parses the jQuery source code.)
Now, my first question is:
Is this standard behavior in browsers? Do CSS background-images always load after all the scripts on the page?
If yes, how could I make sure that those images load before the scripts? Is there an easy and convenient solution to this problem?
UPDATE
I made a test case. This is the HTML source code:
<!DOCTYPE html>
<html>
<head>
<style> body { background-image: url(image1.jpg) } </style>
</head>
<body>
<div> <img src="image2.jpg"> </div>
<script src="http://ajax.googleapis.com/ajax/.../jquery.min.js"></script>
<script src="http://vidasp.net/js/tablesorter.js"></script>
</body>
</html>
As you can see, I have one CSS background-image, one regular image, and two scripts. And now the results:
INTERNET EXPLORER (9 beta)
http://www.vidasp.net/media/loadorder-results/ie2.png
http://www.vidasp.net/media/loadorder-results/ie1.png
Internet Explorer requests the regular image first, then the two scripts, and the CSS image last.
FIREFOX (3.6)
http://www.vidasp.net/media/loadorder-results/firefox2.png
http://www.vidasp.net/media/loadorder-results/firefox1.png
Firefox is doing it right. All resources are requested in the order in which they appear in the HTML source code.
CHROME (latest stable)
http://www.vidasp.net/media/loadorder-results/chrome2.png
http://www.vidasp.net/media/loadorder-results/chrome1.png
Chrome demonstrates the issue that made me write this question in the first place. The scripts are requested before the images.
OPERA (11)
http://www.vidasp.net/media/loadorder-results/opera1.png
http://www.vidasp.net/media/loadorder-results/opera2.png
Like Firefox, Opera is doing it right, too. :D
To sum up:
Exceptions so this rule:
Now that I laid out the issue, let me move on to my question:
How to make IE and Chrome request the images before the scripts?
947
Check Chrome's Site SettingsOpen Chrome's menu and head to Settings. From the left pane, click Privacy and security. Click Site Settings > Images. Below Default behavior, select the Sites can show images option.
The idea of pre-loading images is to load them and put them in the cache before they're even needed. This means that when they are called for they'll appear almost immediately. This property is most important with things like navigation graphics and image rollovers.
Right-click on the element you want to change and left-click on “Inspect.” Double-click on the hyperlink in the piece of highlighted code. The hyperlink should end with an image file extension — like jpeg or svg. Replace the hyperlink with a link to your new image and hit Enter.
In this case, you can just launch Google Chrome and go to its Settings > Privacy and Security and select the 'Images' option under the 'Content' section. From here, you need to make sure that the option to show all images on your browser is enabled.
Most latest browsers to this kind of unpredictable parallel preloading of stuff these days, for performance reasons and basically ruining any chance of creating an order for loading components. This of course happens once the full DOM has been loaded. Same story as with JQuery lazy loading of images, which has been broken for a while now.
81
Use image preloading capabilities through rel="preload" attribute
<link rel="preload" href="images/mypic.jpg" as="image">
The as attribute indicates the kind of object the browser should expect. So this adds highest priorities among all images you load on page, but not change priority "JS -> Image"
<link rel="preload" href="images/mypic.jpg">
Declaration without as allow to preload images even before js load, increasing Image loading priority.
Preloading feature
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
