Question

我使用$('img').attr('src','newUrl');

使用jQuery动态更改图像

这样，图像仅在完全加载时显示。

我的连接速度很慢，所以我希望图像能够直接显示并看到它逐渐加载，就像我到达网页上的任何页面时“显示”图像一样（无论是从上到下，还是从模糊根据图像的压缩算法来锐化。

我想用javascript，jQuery或任何更简单的替代方法来做到这一点。

（我知道如何在图片加载时显示进度条或“加载...”文字，这不是我正在寻找的内容）

如果您想要更新，则此处为fiddle。

Answer 1

我找到了一种方法，你想要的。不要使用jquery中的attr("src",)，删除并添加img个html()元素，因此您可以触发浏览器加载图像源，浏览器会在加载时显示图像（已测试）在铬）。

HTML：

<p><button>change image source</button></p>
<div>
    <img src="http://xxxxx">
</div>

脚本：

var newImg = '<img src="http://yyyyyy">';

$('button').click(function(){
    $('div').html(newImg);
});

这是您更新的小提琴：http://jsfiddle.net/jxwv52u7/1/ 我希望它有所帮助。

Answer 2

基于我一年前做过的一些测试，我发现在将图像的.src从一个值更改为另一个值时，没有可靠的方法来获取加载事件。因此，我不得不求助于加载新图像并在加载新图像时替换新图像。该代码已经在几百个网站上成功运行（幻灯片显示它已经使用了大约一年），所以我知道它有效。

如果在新图像上设置.src属性之前设置了加载处理程序，则可以可靠地获取加载事件。这是我今天早些时候为捕获加载事件而编写的一些代码：jQuery: How to check when all images in an array are loaded?.

此代码附加事件处理程序BEFORE设置.src在我尝试过的现代浏览器中为我工作（我没有测试旧浏览器）：

 $("img").one("load", function() {
        // image loaded here
    }).attr("src", url);

您可以在此处看到它：DEMO，您可以使用该jsFiddle测试您想要的任何浏览器。只需单击图像即可加载新图像。它循环遍历三个不同的图像（每次设置.src），每次唯一地加载其中两个（从不从缓存中）和缓存中的一个，以便测试两种情况。每当调用.load处理程序时，它都会向屏幕输出一个msg，这样你就可以看到它是否被调用。

使用jQuery更改图像并查看图像加载

2 个答案: