Question

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

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

我的代码的另一部分是使用jQuery更改图像src / text。

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。

由于

Answer 1

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

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

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

希望这有帮助。

Answer 2

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

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

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

开发人员尝试使用.load（）解决的常见问题   快捷方式是在图像（或集合）时执行函数   图像）已完全加载。有几个已知的警告   这应该注意。这些是：


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

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

它没有正确地冒泡DOM树

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

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

Answer 3

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

在文件的头部放

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

Answer 4

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

 $('#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。

Answer 5

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

btw，因此您可以使用js预加载图像。要么添加

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

到您的HTML或使用JS

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

这样就可以缓存图像

Answer 6

这是网络的延迟。试试这个：

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

jQuery用$（selector）.prop更改<img/> src需要很长时间

6 个答案: