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的函数可以使用“Image”元素作为保留处理程序的位置。更改真实 <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; }); })();

Answer 2

你只是用jQuery预加载图像，这样当用户点击时，下一个图像已经加载，不应该有延迟......除非用户进入你的页面，然后开始点击加载前的图像。

http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript

Answer 3

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的疯狂缓存处理。

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

3 个答案: