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.load未触发。如何检查图片是否在浏览器缓存中并强制触发jQuery.load？

感谢。

Answer 1

保罗爱尔兰为此编写了一个简洁的小插件。它完全符合您的要求，包括从缓存中加载的图像：

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

我已经用上面的插件更新了你的小提琴。这应该回答你的问题：

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

Answer 2

jQuery documentation说：

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

应该注意有几个已知的警告。
这些是：
- 它不能一致地工作，也不能可靠地跨浏览器
- 如果图像src设置为与之前相同的src，则在WebKit中无法正确触发
- 它没有正确地冒泡DOM树
- 可以停止为已经存在于浏览器缓存中的图像启动

您可能希望使用其他库来预加载图像。我建议PreloadJS

浏览器图像缓存和jQuery.load（）问题

2 个答案: