更改<img rel="nofollow noreferrer" src ="XXX"/>,新图像加载完成后的js事件？

Question

我有一个照片库网页,其中单个<img src="XXX" />元素的src更改(点击)用javascript来显示下一个图像 - 我猜是一个穷人的ajax.当新图像几乎立即出现时,在更快的连接上工作得很好.即使加载需要几秒钟,我测试过的每个浏览器都会保留旧图像,直到新图像完全加载为止.

然而,在慢速连接上等待那几秒钟会有点混乱,我想知道是否有一些javascript事件在新图像加载完成时会触发,允许我放一点工作......动画gif或者其他什么东西同时.

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

谢谢.

Answer 1

您可以在"load"事件上设置处理程序.

$('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的函数可以使用"Image"元素作为保留处理程序的位置.然后,更改真实 <img>标签的实际"src"属性的代码也将更新"Image"对象实例的"src".浏览器只会真正加载一次图像(假设缓存控制很酷),但浏览器仍然会调用"Image"的"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;
  });
})();