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

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

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

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

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

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

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

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

Answer 2

您可能想尝试使用jquery .attr函数更改属性.如果我没记错的话,src图像的标签是属性而不是属性.虽然这两个.prop和.attr做的比较相同的功能,以确保一致的行为,浏览器之间可能要使用.attr标签来代替.

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

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

希望这可以帮助.