在Firefox中使用jQuery更改img src

Question

我创建了一个简单的图片库，中间有一张大图片，下面是缩略图：

<img class="primary-image" src="example.jpeg">
<div class="thumbnails"> 
    <img class="thumbnail" src="red.jpeg">
    <img class="thumbnail" src="blue.jpeg">
    <img class="thumbnail" src="green.jpeg">
</div>

我在缩略图上有以下点击处理程序：

$('.thumbnail').click(function() {
    var src = $(this).attr('src');
    $('.primary-image').attr('src', src);
});

这在chrome中可以正常工作，但是在Firefox中，图像从上到下缓慢加载，产生了一个丑陋的“过渡”，这本来就不应该存在。

到底是怎么回事？

更新

我现在注意到正在发生的事情是浏览器未显示新图像。 并且它仅在特定图片中发生：

• 如果我快速上下滚动，图片会改变。 （点击缩略图后）
• 如果整个画布可见，并且我什么也不做，则前一张图片会保留在那里，而不会显示新图片。 （点击缩略图后）
• 如果我切换应用程序并返回到Firefox，新图片就在那里。 （点击缩略图后）
• 如果我双击缩略图，则图片变化完美。

Answer 1

您是否尝试过预加载图像？ 也许图片是在Chrome中缓存的，但不是在FireFox中缓存的 。

StackOverflow上有人发布了一些代码以轻松地预加载图像。 请看一下使用jQuery预加载图像