将image.src设置为自身会触发onLoad事件吗？

Question

我似乎找不到一个明确的答案...

假设我在页面上有一个JavaScript引用指向一张图片，并且我将load事件处理程序绑定到该元素。例如，像这样的东西:

---

HTML

<img id="myImage" src="http://example.com/image.jpg" />

JavaScript

var $myImage = $('#myImage');
$myImage.load(function() {
    alert('Image loaded!')
});

现在，如果我这样做：

var imageElem = $myImage[0];
imageElem.src = imageElem.src; // Re-assign the image source path

如果图片已经从服务器加载完毕，load事件处理程序仍然会触发吗？在Firefox中似乎是可以的，但是否安全依赖此行为呢？

我提出这个问题是因为我曾在一个jQuery插件中看到过这种用法，用于检查所有图像是否都已加载。如果图片在绑定load事件处理程序之前就已经加载完成，那么它将不会被触发，除非使用上述方法重新触发。

- FixMaker

Answer 1

设置img.src应该触发load事件，但有一些注意事项。根据jQuery自己关于.load事件的文档，

引用: 使用.load()快捷方式时与图像一起使用的load事件的注意事项 开发人员试图使用.load()快捷方式解决的常见问题是在图像（或图像集）完全加载时执行函数。这方面有几个已知的注意事项。它们是:

• 它在不同的浏览器中不能始终和可靠地工作
• 如果图像src设置为与之前相同的src，则在WebKit中无法正确触发
• 它不能正确地冒泡到DOM树上
• 对于已经存在于浏览器缓存中的图像，可能会停止触发

- Judah Gabriel Himango

Answer 2

我在Chrome检查器中查看了这个:

> img = document.createElement('img')
    <img>​
> img.addEventListener('load', function(e) {console.log('loaded');});
    undefined
> img.src = 'http://placekitten.com/200/300';
    "http://placekitten.com/200/300"
    loaded
> img.src = 'http://placekitten.com/200/300';
    "http://placekitten.com/200/300"
> img.src = 'http://placekitten.com/200/30';
    "http://placekitten.com/200/30"
    loaded 
> img.src = 'http://placekitten.com/200/300';
    "http://placekitten.com/200/300"
    loaded
> img.src = 'http://placekitten.com/200/300';
    "http://placekitten.com/200/300"

所以，就 Chrome 浏览器而言，只有在您先将 src 设置为其他内容时才会执行该操作。

- Simon Scarfe

Answer 3

我也遇到了这个问题，并找到了一个简单的解决方法。

您可以通过替换源属性来多次触发已加载事件，即使该值等于现有源。您只需要添加一个不同的参数，该参数将被服务器忽略。

看看这个例子：

var source = "http://example.com/image.jpg";
var imageElement = document.createElement('img');
imageElement.src = source + "?ignorethis=" + new Date().getTime(); // loaded
imageElement.src = source + "?ignorethis=" + new Date().getTime(); // loaded again

我知道，这有点不太规范，但能跨浏览器使用。

- ˈvɔlə