How to make the browser (IE and Chrome) request images before scripts?

Question

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

Answer 1

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.

Answer 2

Consider that the browser can't do anything till it builds the DOM. So first it parses the whole page, THEN it loads the images (even if they're from the CSS).

You could load the images in DATA segments inline in the CSS or the page, that might speed those things up, or you could inject the jQuery reference after the page is loaded (say set a timer for 500 ms) but obviously that will affect usability to some extent.

Now, I'm pretty sure this is all implementation dependent, you could always find a browser that would load images as it came to them, but consider what it means to build a DOM and then to fill it in.

---

http://en.wikipedia.org/wiki/Data_URI_scheme

If SO doesn't strip it, there should be a red dot between here and the code :\

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IAAAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFoZSBHSU1Q72QlbgAAAF1JREFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jqch9//q1uH4Tzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />

So that's what I meant, use the DATA URI scheme

Answer 3

We solved this problem using .load inside the .ready jquery call

something like:

jQuery(document).ready(function($){
  jQuery('#my_container img').load(function($){
     /* SCRIPT */
  });
});

Answer 4

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

Answer 5

A possible option is to load all those images that you need at the start of your script. See this TechRepublic article for more info.