6

所以这个代码功能本身没有问题。我有这样的事情：

<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。

谢谢

4

6 回答 6

5

You may want to try altering the attribute using the jquery .attr function. If I recall correctly the src tag of an image is an attribute not a property. Although both .prop and .attr do relatively the same function, to ensure consistent behavior between browsers you may want to use the .attr tag instead.

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

As far as the delay goes, this could be due to the size of the image. The browser has to make a GET request to the server for the image and then paint the DOM with it. If the image is large, it could cause a time lapse between when the code changes the source and when the new image is properly written to the DOM. If the image is large, you may want to consider scaling it down or optimizing it for web use.

Hope this helps.

于 2012-10-04T16:43:50.050 回答
5

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

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

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

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

  • 它不能始终如一地工作，也不能可靠地跨浏览器
  • 如果图像 src 设置为与以前相同的 src，它不会在 WebKit 中正确触发
  • 它没有正确地冒泡 DOM 树
  • 可以停止对已经存在于浏览器缓存中的图像进行触发

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

于 2012-10-04T16:39:28.357 回答
3

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

在文件的开头放

<script type="text/javascript">
   img2 = new Image();
   img2.src = "/path/image2.png";
</script>
于 2012-10-04T16:41:10.773 回答
2

就是网络延迟。尝试这个：

<div>
    <div><img id="imageToChange" src="/path/image.png" /></div>
    <div id="textToChange">Text</div>
</div>
<img src='/path/image2.png' style='display:none'>
于 2012-10-04T16:40:39.263 回答
2

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

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

于 2012-10-04T16:37:30.570 回答
2

当您更改图像的 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";

这样图像将被缓存

于 2012-10-04T16:39:18.777 回答