jQuery - event handling for image preloading

Question

Working on an HTML5/CSS3 project that requires some mildly large (~100k) sprite maps to be loaded and placed onto a <canvas>. The placement is no problem, but I'm running into the problem of accidentally place the images before they're loaded, because there's no way to detect load completion of images requested via javascript.

What's the best way to preload images and get a handle on the oncomplete event? Right now I'm detecting pageload with the standard $(document).ready(), but I can adapt the code to any event handler required. If there's a plugin that handles it all, then brilliant.

I'm a little more particular about the preloading though - if possible I'd like everything to stay inside javascript. Looking for something more elegant than placing the images in a hidden div or dummy css.

Any ideas?

You can check out this link: [stackoverflow.com/questions/476679/… [1]: stackoverflow.com/questions/476679/… — Redwood
– Redwood, Commented Jan 15, 2013 at 23:21

Joseph Silber · Accepted Answer · 2013-01-15 23:23:33Z

1

var img = new Image();
img.onload = callbackFunction;
img.src = 'http://source.of/image.png';

If you use this a lot, just create a function for it:

function preloadImage (src, callback) {
    var img = new Image();
    img.onload = callback;
    img.src = src;
    return img;
}

If you want to fire a callback when all the images have loaded, use a deferred object:

function preloadImages (paths, callback) {

    var deferreds = [];

    $.each(paths, function (i, src) {
        var deferred = $.Deferred(),
            img = new Image();

        deferreds.push(deferred);
        img.onload = deferred.resolve;
        img.src = src;
    });

    $.when.apply($, deferreds).then(callback);
}

edited Jan 15, 2013 at 23:23

answered Jan 15, 2013 at 23:18

Joseph Silber

221k59 gold badges369 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CodeMoose Over a year ago

Awesome - I'm a little embarrassed I overlooked something this easy. I'll award answer once I have a chance to try it in my code.

CodeMoose Over a year ago

Worked like a charm - very detailed answer. Cheers mate.

Chris · Accepted Answer · 2013-01-15 23:18:36Z

0

Can you use the load handler? http://api.jquery.com/load-event/

answered Jan 15, 2013 at 23:18

Chris

1,7352 gold badges12 silver badges11 bronze badges

Comments

Onur Yıldırım · Accepted Answer · 2013-01-15 23:32:52Z

0

You can preload multiple images and assign the same or different callbacks to each like this:

preloadImages([
    {src:"image1.jpg", callback:someFunction1},
    {src:"image2.jpg", callback:someFunction2},
    {src:"image3.jpg", callback:someFunction3}
]);

function preloadImages(arr)
{   
    function _preload(imgObj)
    {
        var img = new Image();
        img.src = imgObj.src;
        img.onload = imgObj.callback;
    }

    for (var i = 0; i < arr.length; i++)
    {
        _preload(arr[i]);
    }
}

answered Jan 15, 2013 at 23:32

Onur Yıldırım

33.9k14 gold badges86 silver badges99 bronze badges

Collectives™ on Stack Overflow

jQuery - event handling for image preloading

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related