javascript - 更改 <img src ="XXX"/>，新图像完成加载时的 js 事件？

Question

我有一个图片库网页，其中有一个 <img src="XXX" />元素的 src使用 JavaScript 更改(单击)以显示下一张图像 — 我猜是穷人的 ajax。当新图像几乎立即出现时，在更快的连接上效果很好。即使加载需要几秒钟，我测试过的每个浏览器都会保留旧图像，直到新图像完全加载。

不过，在慢速连接上等待那几秒钟有点令人困惑，我想知道是否有一些 JavaScript 事件在新图像加载完成时触发，让我可以稍微工作.. . 动画 gif 或其他内容。

我知道我可以真正使用 AJAX(我已经在使用 jQuery)，但这是一个非常简单的解决方案。除了这种滞后，还有什么其他原因我应该远离这种改变图像的方法吗？

Answer 1

您可以在“加载”事件上设置处理程序。

$('img.whatever')
  .load(function() { /* do stuff */ })
  .attr('src', newURL);

实际上我猜你想用“live()”来做这个:

$('img.reloadable').live('load', function() { $(this).show(); });
// ...
$('img#someId').hide().attr('src', newURL);

编辑 — 哇，那一年去哪儿了？好吧，事实证明，我以前键入的“实时”方法的一个问题是“加载”事件不冒泡。然而，现在您可以做的是利用“图像”对象(与 <img> DOM 元素相对)的行为方式。基本上，更改 URL 的函数可以使用“图像”元素作为保留处理程序的位置。 更改 real 的实际“src”属性的代码<img>然后标签还会更新“Image”对象实例的“src”。浏览器只会真正加载图像一次(假设缓存控制很酷)，但浏览器仍会调用“图像”的“onload”处理程序:

(function() {
  var imageObj = new Image();

  imageObj.onload = function() {
    // code to run when image loads from server 
  };

  $('#hypotheticalButton').click(function() {
    $('#imgToUpdate').attr('src', newURL);
    imageObj.src = newURL;
  });
})();