Question

可能重复：
jQuery callback on image load (even when the image is cached)

因此在jQuery中不推荐使用.load()方法。 load()是`bind（'load'，function）的快捷方式。

来自http://api.jquery.com/load-event/：

与图片一起使用时加载事件的注意事项

开发人员尝试使用.load（）解决的常见问题   快捷方式是在图像（或集合）时执行函数   图像）已完全加载。有几个已知的警告   这应该注意。这些是：

它不能一致地工作，也不能可靠地跨浏览器它不会   如果图像src设置为与src相同，则在WebKit中正确触发   在它没有正确地冒泡DOM树之前可以停止射击   对于已经存在于浏览器缓存中的图像

如何一致地执行图像加载功能？我的当前代码如下：

$(newImage).bind('load', function() {
    createSlices(slide); 
});

然而，在阅读完文档后（虽然我没有注意到任何问题）我担心这可能不会引起一些用户的注意。

Answer 1

试试这个插件man：调用waitforimages插件：https://github.com/alexanderdickson/waitForImages（向下滚动链接，您会看到各种高级用途） - demo { {3}}

希望它符合需要:)

<强>代码

$('selector').waitForImages(function() {
    // All descendant images have loaded, now slide up.
    $(this).slideUp();  
});

Answer 2

var img = new Image();  
img.onload = function() {

} 

img.src=  src-image

上述代码适用于所有浏览器，甚至没有jquery。

Answer 3

您可以担心，如果图像被缓存，IE7 / 8有时会无法触发 load 事件。

一种技术是在绑定加载事件后立即检查图像是否完整：

$(newImage).bind('load error', function() {
    createSlices(slide); 
});

// check if the image is immediately complete (cached)
if (newImage.complete || typeof newImage.complete === 'undefined') {
    createSlices(slide);
}

我在以下方面成功测试过：

IE 7/8/9/10
FF4 +
Chrome（最新）
Safari 5 +

Answer 4

有一个很棒的库可以处理这个：https://github.com/desandro/imagesloaded

我已经在生产中使用它并且效果非常好。非常可靠，没有一个投诉。

绑定（'load'）的jQuery替代用于图像

4 个答案: