如何在 JQuery 中判断图像是否已加载或缓存？

Question

似乎如果图片之前已经被缓存，.load()函数就不会触发。因此，如果你想确保在加载和显示另一张图片（比如放大镜）之前已经加载了某个图片，你不能像这样做：

$(img_to_load_first)
    .load(
        $(img_to_load_last)
            .src("2nd.png");
    )
    .src("1st.png");

那么如何确保在JQuery中按顺序加载呢？

- CpILL

---

这段代码什么时候运行？它是在$(document).ready中吗？ - Justin Swartsel

Answer 1

你需要做的是有选择性地处理你的载入绑定。你可以通过测试Image对象属性complete来验证载入。

例如：

$('.load_selector').each(function(){

    if (!this.complete) {
        $(this).load(function(){
            // handle image load event binding here
        });
    } else {
        // handle image already loaded case
    }

});

请注意，上面的this（单独使用）是指由jQuery提供的图像对象的DOM引用。

- sparkey0

---

这对您有帮助吗？请注意，如果需要，您可以在上述else子句中触发加载处理程序。 - sparkey0

这方面的兼容性有什么想法吗？ - Augustin Riedinger

广泛支持，请在此处查看浏览器矩阵：http://www.w3schools.com/jsref/prop_img_complete.asp -- 需要记住的一件事是，在检查完整属性之前，您可能需要测试有效的src属性。许多浏览器将对空src返回true（例如：空源已完成，因为它不会加载/无法加载）。 - sparkey0

Answer 2

谢谢Sparkey，

我会尝试一下，但看起来很不错。我在这里找到了一篇关于这个主题的广泛讨论：http://www.bennadel.com/blog/1007-jQuery-Attr-Function-Doesn-t-Work-With-IMAGE-complete.htm

这引导我找到了“jQuery 'onImagesLoad'插件”：http://includes.cirkuit.net/includes/js/jquery/plugins/onImagesLoad/1.1/documentation/

它似乎可以通过以下方式解决问题：

$imgs.each(function(i, val){
    $(this).bind('load', function(){
        // ...
    }).each(function(){
        if (this.complete || this.complete === undefined){ this.src = this.src; } //needed for potential cached images
    });
});

基本上就是你说的那样，只不过他完成的检查还会测试"undefined"。

- CpILL

Answer 3

如果您想将所有这些功能封装在一个jQuery扩展方法中，请尝试使用以下代码（可以等待任意数量的图像）：

$.fn.imagesLoaded = function () {
    var def = $.Deferred();
    var count = this.length;
    this.each(function () {
        if (this.complete) {
            if (!--count) {
                def.resolve();
            }
        } else {
            $(this).load(function () {
                if (!--count) {
                    def.resolve();
                }
            });
        }
    });
    return def.promise();
}

然后只需像这样使用：

$(img_to_load_first).imagesLoaded().done(function () {
    $(img_to_load_last).src("2nd.png");
});

- iCollect.it Ltd

Answer 4

你也可以检查图片的宽度或高度来判断它是否已经加载。

例如：

var img = _content.find('img');
  if(img[0].width >0 || img[0].height > 0 ) {
  console.log('already loaded image');
  } else {
  img.on('load', function() {
    console.log('image loaded');
  });
}

- chriscrossweb