浏览器图像缓存和jQuery.load()问题

Question

代码示例:

var img = $("img");
var n = img.length;
var i = 0;
function loadImg(i) {
    if( i < n ) {
        $(img[i]).load( function() {
            console.log("img["+i+"] loaded");
            i++;
            loadImg(i);
        });
    } else {
        console.log("img["+i+"] loaded");
        return false;
    }
}
loadImg(0);

这段代码工作，但当图像已经在浏览器缓存- jQuery。加载未启动。如何检查图片是否在浏览器缓存中并强制触发jQuery.load?

谢谢。

Answer 1

Paul Irish为此编写了一个简洁的小插件。它完全符合您的要求，包括从缓存加载的图像:

https://github.com/paulirish/jquery.imgloaded

我已经更新了你的小提琴与上述插件包括。这应该能回答你的问题:

http://jsbin.com/acuhaf/9/edit

Answer 2

jQuery文档中说:

与image一起使用时的load事件注意事项
开发人员试图使用.load()快捷方式解决的一个常见挑战是，当图像(或图像集合)完全加载时执行一个函数。

有几个已知的需要注意的注意事项。
这些都是:
-它不一致地工作，也不可靠的跨浏览器
-如果图像src被设置为与以前相同的src，它在WebKit中不会正确触发
-它不能正确地冒泡DOM树
- 可以停止触发已经存在于浏览器缓存中的图像

您可能需要使用其他库来预加载图像。我推荐PreloadJS