jQuery: Preloading a set of images, but only if nothing else loads

Question

Hello all

Is it possible with jQuery to identify if the browser currently isn't loading anything, and with anything I mean both loading images and .load Ajax calls etc.

The thing I would like to achieve is to secretly (hidden) preload a set of images (heavy in weight) in the background, but without distracting the other load processes. Meaning they will only preload if the browser have nothing else to do, and also stop preloading if something else starts to load..

Any suggestions?

Answer 1

Have a look at Ajax Events, in particular the ajaxStop global event. As for knowing when an image has finished loading, the load event can be used. For example:

$("#myImage").load(function() {
    alert("image has completely loaded!");
});

To put those together:

$("selector").ajaxStop(function(event,request,settings){
    var $img = $('<img src="foo.jpeg" id="myImage"/>');
    $img.load(function() {
        alert("image has completely loaded!");
        $("div").append($(this));
    });
});