我有一个照片库网页，其中单个 <img src="XXX" /> 元素的 src 使用 javascript 更改（单击）以显示下一张图片 - 我猜是穷人的 ajax。当新图像几乎立即出现时，在更快的连接上效果很好。即使加载需要几秒钟，我测试过的每个浏览器都会保留旧图像，直到新图像完全加载。
不过，在慢速连接上等待那几秒钟有点令人困惑，我想知道在新图像加载完成时是否会触发一些 javascript 事件，让我可以稍微工作.. . 动画 gif 或其他东西。
我知道我可以真正使用 AJAX（我已经在使用 jQuery），但这是一个非常好的和简单的解决方案。除了这种滞后，还有什么其他原因我应该远离这种改变图像的方法吗？
谢谢。
【问题讨论】：
标签： javascript jquery html javascript-events
您可以在“加载”事件上设置处理程序。
$('img.whatever')
.load(function() { /* do stuff */ })
.attr('src', newURL);
其实我猜你想用“live()”来做这个：
$('img.reloadable').live('load', function() { $(this).show(); });
// ...
$('img#someId').hide().attr('src', newURL);
edit — 哇，那一年去哪儿了？好吧，事实证明，我在回溯时输入的“实时”方法的一个问题是“加载”事件没有冒泡。然而，现在您可以做的是利用“图像”对象（与<img> DOM 元素相反）的行为方式。基本上，更改 URL 的函数可以使用“图像”元素作为保存处理程序的位置。 更改 real <img> 标记的实际“src”属性的代码也会更新“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;
});
})();
【讨论】：
src="xxx" 用 js 更改时，$.load() 在新图像完成加载后触发。
您只需使用 jQuery 预加载图像，这样当用户单击时，下一个图像已经加载并且不应该有延迟......除非用户转到您的页面并开始点击加载之前的图像。
http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript
【讨论】：
var slideimg = $('#slideimage');
slideimg.click(function(){
var img = new Image();
var url = 'url_to_next_image.jpg';
$(img).bind('load',function(){
$('#loading').hide();
slideimg.attr('src',url);
}).attr('src',url);
$('#loading').show();
});
即使是 IE 的疯狂缓存处理，这也应该可以工作。
【讨论】：