jQuery对图像加载的回调(即使在缓存映像时也是如此)

Question

jQuery对图像加载的回调(即使在缓存映像时也是如此)我想做的是：$("img").bind('load', function() {   // do stuff });但是，当从缓存加载图像时，LOAD事件不会触发。jQuery文档建议插件来解决这个问题，但是不管用

Answer 1

我可以建议您将其重新加载到非DOM映像对象中吗？如果它是缓存的，这将不会花时间，而且负载仍然会启动。如果没有缓存，它将在加载映像时触发onload，这应该与映像的DOM版本完成加载的时间相同。

JavaScript：

$(document).ready(function() {
    var tmpImg = new Image() ;
    tmpImg.src = $('#img').attr('src') ;
    tmpImg.onload = function() {
        // Run onload code.
    } ;
}) ;

更新(处理多个图像和正确排序的onload附件)：

$(document).ready(function() {
    var imageLoaded = function() {
        // Run onload code.
    }
    $('#img').each(function() {
        var tmpImg = new Image() ;
        tmpImg.onload = imageLoaded ;
        tmpImg.src = $(this).attr('src') ;
    }) ;
}) ;

Answer 2

我的简单解决方案，它不需要任何外部插件，对于普通情况应该足够了：

/**
 * Trigger a callback when the selected images are loaded:
 * @param {String} selector
 * @param {Function} callback
  */
var onImgLoad = function(selector, callback){
    $(selector).each(function(){
        if (this.complete || /*for IE 10-*/ $(this).height() > 0) {
            callback.apply(this);
        }
        else {
            $(this).on('load', function(){
                callback.apply(this);
            });
        }
    });
};

像这样使用它：

onImgLoad('img', function(){
    // do stuff
});

例如，要在加载时淡出图像，可以这样做：

$('img').hide();
onImgLoad('img', function(){
    $(this).fadeIn(700);
});

---

或者，如果您更喜欢类似jQuery插件的方法，那么可以这样做：

/**
 * Trigger a callback when 'this' image is loaded:
 * @param {Function} callback
 */
(function($){
    $.fn.imgLoad = function(callback) {
        return this.each(function() {
            if (callback) {
                if (this.complete || /*for IE 10-*/ $(this).height() > 0) {
                    callback.apply(this);
                }
                else {
                    $(this).on('load', function(){
                        callback.apply(this);
                    });
                }
            }
        });
    };
})(jQuery);

并以这样的方式使用：

$('img').imgLoad(function(){
    // do stuff
});

例如：

$('img').hide().imgLoad(function(){
    $(this).fadeIn(700);
});