(function($)
{
    $.fn.WhenImagesLoad = function(options)
    {
        var opts = $.extend({}, $.fn.WhenImagesLoad.defaults, options);

        return this.each(function()
        {
            imgs = $('img', this);
            if (imgs.length == 0 && opts.callbackIfNoImagesExist) opts.callback(this); //call callback immediately if no images were in selection
            $(imgs).bind('load', { totalImgCnt: imgs.length, loadedImgCnt: 0, container: this }, function(event)
            {
                if (++event.data.loadedImgCnt == event.data.totalImgCnt)
                {
                    if (opts.callback) opts.callback(event.data.container);
                } else
                {
                    if (opts.imgCallback) opts.imgCallback(event.data.container);
                    $.fn.WhenImagesLoad.loadedImgCnt++;
                }
            }).each(function()
            {
                if (this.complete)
                { //needed for cached images
                    this.src = this.src;
                }
            });
        });

    };
    $.fn.WhenImagesLoad.loadedImgCnt = 0;
    $.fn.WhenImagesLoad.defaults = {
        callback: null, //the function you want called when all images within $(yourSelector) have loaded
        callbackIfNoImagesExist: true, //if no images exist within $(yourSelector), should the callback be called?
        imgCallback: null
    };

})(jQuery);

