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

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

<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'); 
}

正如您所料，这与我预期的完全相同。但有一个怪癖。

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

例如，当我打电话给changeImage（）时，文本会立即改变，但图像可能不会改变，直到1-2秒后。（任何伸展，大约6KB，和本地不大的图像）

我还没有发现任何其他人真的抱怨它，但我想知道的是，如果有任何方法来加快图像的更改SRC？也许更好的方法来做到这一点？

这也是jquery 1.8.0。

谢谢

来源

2012-10-04 bbedward

你在Firebug的网络标签中看到了什么？ – SLaks

我从来没有见过这种行为。你可以在小提琴中重现吗？ –

尝试设置已加载的'src''img' – Jashwant

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

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

注意事项

面临的共同挑战开发商尝试使用.load（）快捷方式是执行解决在图像（或图像集合）已完全加载时运行。有几个已知的注意事项这应该注意。它们是：

这并不一致，也不可靠地工作，跨浏览器的

它不正确的WebKit如果图像的src设置为相同的SRC像以前

它不火正确地泡了DOM树

可以停止火已经生活在浏览器的缓存图片

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

来源

2012-10-04 16:39:28 jimp

谢谢。其他答案都是正确的，我最终都创建了javascript图像对象并使用load事件（因为我偶尔注意到它们仍然会从缓存中释放）。似乎工作到目前为止，没有问题。 – bbedward

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

$('#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-04 16:37:30 aepheus

当您更改图像的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-04 16:39:18 galchen

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

<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-04 16:40:39 kevinli404

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

在文档的头上

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

来源

2012-10-04 16:41:10

你可能想尝试改变使用jQuery .attr功能的属性。如果我记得正确，图像的src标记是属性而非属性。虽然这两个.prop和.attr做的比较相同的功能，以确保您可能需要使用.attr标签，而不是浏览器之间一致的行为。

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

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

希望这会有所帮助。

来源

2012-10-04 16:43:50 War10ck

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

回答

相关问题