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事件处理程序之前加载的，那么它就不会火，除非使用上述方法重新触发。）

Answer 1

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

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

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


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

如果图像src设置为与src相同，则在WebKit中无法正确触发   前

它没有正确地冒泡DOM树

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

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设置为其他内容。

Answer 3

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

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

看一下这个例子：

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

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

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

3 个答案: