farinspace / jquery.imgpreload

The jQuery.imgpreload plugin lets you preload images before and after the DOM has loaded.

jQuery Image Preload Plugin

The jQuery.imgpreload plugin lets you preload images before and after the DOM has loaded.

Tested: IE6, IE7, IE8, IE9+, FF, Chrome, Safari

Usage

Callbacks

The following are available callbacks, you may change them globally or override the defaults by passing the settings object to the imgpreload method.

$.fn.imgpreload.defaults =
{
    each: null // callback invoked when each image is loaded
    , all: null // callback invoked when all images have loaded
};

After DOM loaded

The following illustrates using the plugin to preload images after the dom has loaded (e.g. using jQuery selectors):

$('#content img').imgpreload(function()
{
    // callback invoked when all images have loaded
    // this = array of dom image objects
    // check for success with: $(this[i]).data('loaded')
});

$('img.logos').imgpreload
({
    each: function()
    {
        // callback invoked when each image is loaded
        // this = dom image object
        // check for success with: $(this).data('loaded')
    },
    all: function()
    {
        // callback invoked when all images have loaded
        // this = array of dom image objects
        // check for success with: $(this[i]).data('loaded')
    }
});

Before DOM loaded

To preload images before the dom has loaded, for instance in the head of the document, you would have to use specific image paths.

$.imgpreload('/images/a.gif',function()
{
    // callback invoked when all images have loaded
    // this = array of dom image objects
    // check for success with: $(this[i]).data('loaded')
});

You can pass a single image path (as above) or an array of image paths.

$.imgpreload(['/images/a.gif','/images/b.gif'],function()
{
    // this = array of dom image objects
    // check for success with: $(this[i]).data('loaded')
    // callback executes when all images are loaded
});

each and all callbacks are available to use.

$.imgpreload(['/images/a.gif','/images/b.gif'],
{
    each: function()
    {
        // callback invoked when each image is loaded
        // this = dom image object
        // check for success with: $(this).data('loaded')
    },
    all: function()
    {
        // callback invoked when all images have loaded
        // this = array of dom image objects
        // check for success with: $(this[i]).data('loaded')
    }
});

jquery.imgpreload's Issues

Make it AMD compatible.

Hello!
Would like to use it with RequireJS as define module.
Possible solution is here: https://github.com/umdjs/umd/blob/master/jqueryPlugin.js

Preloaded Image Width and Size

Hey there, nice work with this plugin - thanks!

I just wanted to check if there was any case we can also extract the dimensions of the image in the data of that element.

I tried adding

$.data(this, 'dimensions', { 'width': img.width, 'height': img.height });

just after the src to that image object is allocated but its giving me an error or indefinite recursion... any clues to how we can go over this without removing the above code?

thanks a lot!

Is it supposed to work in IE8?

Throws error css() is null or not an object on line 59, which is

url = $(elem).attr('src') || $(elem).css('background-image').replace(/^url\((?:"|')?(.*)(?:'|")?\)$/mg, "$1");

I'm using it with array of images, rather than jquery elements.

load event fires multiple time with animated GIF on IE7

The load event is actually fired at each cycle of an animated GIF, causing infinite loop (the callback is called over and over)

A simple solution is to unbind the load and error event on the image, once we are sure the image is loaded.
It also "keep things clean"

            $(img).bind('load error', function(e)
            {
                loaded.push(img_obj);
                $(this).unbind('load error');
                $.data(img_obj, 'loaded', ('error'==e.type)?false:true);

                if (settings.each instanceof Function) { settings.each.call(img_obj); }

                // http://jsperf.com/length-in-a-variable
                if (loaded.length>=imgs.length && settings.all instanceof Function) { settings.all.call(loaded); }
            });

see here : http://fragged.org/preloading-images-using-javascript-the-right-way-and-without-frameworks_744.html