如何判断JQuery中是否加载或缓存了图片？

Question

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

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

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

Answer 1

你需要做的就是有选择地处理你的负载绑定。您可以通过测试图像对象属性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引用。

Answer 2

如果您想将所有这些功能包装在一个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");
});

Answer 3

谢谢斯帕奇

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

在这里找到"jQuery 'onImagesLoad‘Plugin“：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
    });
});

这很大程度上归结为你所说的，只有他完成的检查也测试“未定义”。