javascript - jQuery 替代 bind('load') 用于图像

Question

可能重复：
图像加载时的 jQuery 回调（即使图像被缓存）

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

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

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

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

它不能始终如一地工作，也不能可靠地跨浏览器 如果图像 src 设置为与以前相同的 src，则在 WebKit 中无法正确触发在浏览器的缓存中`

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

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

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

Answer 1

试试这个插件人：叫waitforimages插件：https ://github.com/alexanderdickson/waitForImages （向下滚动链接你会看到各种高级使用） -演示 http://jsfiddle.net/FZ7Xy/

希望能满足需求:)

代码

$('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 有时会无法触发加载事件。

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

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

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

我已经成功测试过：

• 即 7/8/9/10
• FF4+
• 铬（最新）
• 野生动物园 5+

Answer 4

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

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