将 image.src 设置为自身会导致 onLoad 触发吗？答案

【问题标题】：Will setting the image.src to itself cause onLoad to fire?将 image.src 设置为自身会导致 onLoad 触发吗？
【发布时间】：2012-12-01 14:53:07
【问题描述】：

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

假设我有一个对页面上图像的 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 事件处理程序绑定之前加载，那么它不会触发，除非使用上述方法重新触发。）

【问题讨论】：

标签： javascript dom javascript-events

【解决方案1】：

设置 img.src 应该会触发加载，但有一些注意事项。根据jQuery自己的documentation regarding the .load event，

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

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

它不能始终如一地工作，也不能可靠地跨浏览器

如果图像 src 设置为与之前

它没有正确地冒泡 DOM 树

可以停止为已经存在于浏览器缓存中的图像触发

【讨论】：

【解决方案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 设置为其他内容。

【讨论】：

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

我知道，它有点脏，但可以跨浏览器使用。

【讨论】：