用于图像的 jQuery 替代 bind('load') [重复]答案

【问题标题】：jQuery alternative to bind('load') for use with images [duplicate]用于图像的 jQuery 替代 bind('load') [重复]
【发布时间】：2012-10-05 23:35:02
【问题描述】：

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

所以 .load() 方法在 jQuery 中已被弃用。 load() 是 `bind('load', function) 的快捷方式。

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

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

开发人员尝试使用 .load() 解决的常见挑战快捷方式是在图像（或集合图像）已完全加载。有几个已知的警告这是应该注意的。它们是：

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

如何在图像加载时始终如一地执行一项功能？我当前的代码如下所示：

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

但是在阅读了文档之后（虽然我没有发现任何问题），我担心它可能不会对某些用户触发。

【问题讨论】：

根据我的经验，原生 onload 函数比 jQuery 的 load() 更可靠？

标签： javascript jquery ajax deprecated

【解决方案1】：

试试这个插件 man: called waitforimages plugin: https://github.com/alexanderdickson/waitForImages (向下滚动链接你会看到各种高级用法) - demo http://jsfiddle.net/FZ7Xy/ p>

希望它符合需求:)

代码

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

【讨论】：

【解决方案2】：

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

} 

img.src=  src-image

以上代码适用于所有浏览器，即使没有 jquery。

【讨论】：

@Andrew 感谢格式化。
此代码仍然存在 jQuery 文档概述的相同潜在问题。问题是如何解决这些问题，而不是如何预加载图像。
native onload 适用于所有浏览器，包括 IE6。

【解决方案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+

【讨论】：

【解决方案4】：

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

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

【讨论】：