jQuery 用 $(selector).prop 改变 <img> src 需要很长时间答案

【问题标题】：jQuery changing <img> src with $(selector).prop takes a long timejQuery 用 $(selector).prop 改变 <img> src 需要很长时间
【发布时间】：2012-09-25 18:04:01
【问题描述】：

因此，此代码功能本身没有问题。我有这样的事情：

<div>
    <div><img id="imageToChange" src="/path/image.png" /></div>
    <div id="textToChange">Text</div>
</div>

我有另一部分代码，用 jQuery 更改图像 src/文本。

function changeImage() {
    $('#imageToChange').prop('src', '/path/image2.png');
    $('#textToChange').html('New Text');
}

正如您所料，这完全符合我的预期。但有 1 个怪癖。

在所有主要浏览器 (chrome/FF/IE) 中。图像需要很长时间才能更改。

例如，当我调用 changeImage() 时，文本会立即改变，但图像可能要到 1-2 秒后才会改变。（无论如何都不是大图像，大约 6KB 和本地）

我还没有发现其他人真的在抱怨它，但我想知道是否有任何方法可以加快图像 src 的变化？也许是更好的方法？

这也是 jquery 1.8.0。

谢谢

【问题讨论】：

您在 Firebug 的网络选项卡中看到了什么？
我从未见过这种行为。你有可能在小提琴中重现吗？
尝试设置已经加载的srcimg

标签： javascript jquery html selector image

【解决方案1】：

我以前见过这种行为。延迟是由于图像未缓存以及随后的加载时间造成的。我知道的唯一解决方案：

使用 JavaScript Image 对象预加载您的图像。
处理图像上的load event 并在图像加载后更新文本。注意 jQuery 列出了一些需要注意的问题：

与图像一起使用时加载事件的注意事项

开发人员尝试使用 .load() 解决的常见挑战快捷方式是在图像（或集合图像）已完全加载。有几个已知的警告这是应该注意的。它们是：

它不能始终如一地工作，也不能可靠地跨浏览器

如果图像 src 设置为与之前相同的 src，则它不会在 WebKit 中正确触发

它没有正确地冒泡 DOM 树

可以停止为已经存在于浏览器缓存中的图像触发

http://api.jquery.com/load-event/

【讨论】：

谢谢。每个其他答案通常都是正确的，我最终创建了 javascript 图像对象并使用了加载事件（因为我偶尔注意到它们仍然会从缓存中释放）。到目前为止似乎运行良好，没有问题。

【解决方案2】：

您可能想尝试使用 jquery .attr 函数更改属性。如果我没记错的话，图像的src 标记是属性而不是属性。尽管.prop 和.attr 的功能相对相同，但为了确保浏览器之间的行为一致，您可能需要使用.attr 标记。

$('#imageToChange').attr('src', '/path/image2.png');

就延迟而言，这可能是由于图像的大小。浏览器必须向服务器发出获取图像的 GET 请求，然后用它绘制 DOM。如果图像很大，可能会导致代码更改源代码和新图像正确写入 DOM 之间的时间间隔。如果图片很大，您可能需要考虑将其缩小或优化以供网络使用。

希望这会有所帮助。

【讨论】：

【解决方案3】：

您可以使用 Javascript Image 对象预加载图像。

放在文档的开头

<script type="text/javascript">
   img2 = new Image();
   img2.src = "/path/image2.png";
</script>

【讨论】：

【解决方案4】：

当您更改图像的 src 时，您会获取另一个图像文件。它对新图像发出 HTTP 请求，因此需要在显示之前加载。会是这样吗？

顺便说一句，因此您可以使用 js 预加载图像。要么添加

<img src="path/to/image.jpg" style="display: none" />

到您的 html 或使用 JS

var im = new Image(1,1);
im.src = "path/to/image.jpg";

这样图片就会被缓存

【讨论】：

【解决方案5】：

是网络延迟。试试这个：

<div>
    <div><img id="imageToChange" src="/path/image.png" /></div>
    <div id="textToChange">Text</div>
</div>
<img src='/path/image2.png' style='display:none'>

【讨论】：

【解决方案6】：

这可能是您的图片的加载时间。如果是这种情况，第一次加载图像应该是唯一慢的。将图像更改为其他图像后，后续加载会很快。

 $('#imageToChange').prop('src', '/path/image1.png');
 //slow, need to fetch image
 $('#imageToChange').prop('src', '/path/image2.png');
 //slow, need to fetch image
 $('#imageToChange').prop('src', '/path/image1.png');
 //fast, it already has this image

作为一种解决方案，您可以尝试预加载图片。或者，更好的是，使用css sprites。

【讨论】：