4

我似乎无法找到一个明确的答案来解决这个问题......

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

4

3 回答 3

4

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

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

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

  • 它不能始终如一地工作，也不能可靠地跨浏览器
  • 如果图像 src 设置为与以前相同的 src，它不会在 WebKit 中正确触发
  • 它没有正确地冒泡 DOM 树
  • 可以停止对已经存在于浏览器缓存中的图像进行触发
于 2012-12-13T16:54:51.523 回答
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 设置为其他内容。

于 2012-12-13T16:58:22.393 回答
0

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

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

看看这个例子：

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

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

于 2013-09-06T06:27:24.903 回答