Detect when dynamically injected CSS is loaded

Question

We have an image-heavy site, so the order that images load is important.

One piece of JS is injecting <link type="text/css" ...> tags for CSS, then goes on to preload some images by injecting <img> tags. The trouble is that I want the images referenced by the CSS to load before the preloaded images, but that isn't happening. It downloads the CSS, then the preloaded images, and then the images referenced by the CSS.

What can I do other than setting a timeout? (which would be too short for some people and too long for others)

I would think you'd need an onload event handler for your link elements. A quick search gives a work-around to do something like that: http://stackoverflow.com/questions/3078584/link-element-onload — GolezTrol, Aug 08 '13 at 19:32

score 2 · Accepted Answer · answered Aug 08 '13 at 19:37

In general you can control what is loaded when by javascript. Your trouble is that you don't know exactly, when the dynamically loaded css is ready, so you can't decide when to load what.

Some browsers raise an on-load event when such dynamically loaded css is ready, but there are issues with this approach. I spent a few hours looking for a good solution myself. Here is what I came up with in my "FluXX Compensator (Y)", an app for the ownCloud system:

OC.FluXX.transitions=$('<link/>',{
    'rel':'prefetch',
    'type':'text/css',
    'href':OC.filePath('fluxx_compensator','css','transitions.css')

toggle: function(handle){
    // temporarily include transition style rules if not yet present (should not be!)
    var transitions=OC.FluXX.transitions.clone().attr('rel','stylesheet').attr('id','fluxx-transitions').appendTo('head');
    // some safety catch for browsers that do not fire the load event when stuff is loaded (safari)
    var timer = setTimeout(function(){$('head #fluxx-transitions').off('load');OC.FluXX.time(handle);},500); // should be preloaded...
    // the more elegant approach however is to react on the load event (_if_ fired)
    $('head #fluxx-transitions').one('load',function(){clearTimeout(timer);OC.FluXX.time(handle);});
} // OC.FluXX.toggle

As you can see I clone an object (defined when loading the page) which represents the reference to the css resource. I preload it so that I only have to clone and delete it when required (several times in my case) instead of having to load it via network. I place this clone into the head of the document. I setup a timer as a safety catch but try to react on the on load event. If that event is not raised (for example Safari under MS-Windows does not raise it), then at least the timeout catches. It is the best combination of fast reaction (event driven) and safety (timeout) I could find. Works fine so far...

Hope this helps ;-)

Detect when dynamically injected CSS is loaded

1 Answers1