1

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

<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，新画面就在那里。（点击缩略图后）
  • 如果我双击缩略图，图片会完全改变。
4

1 回答 1

1

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

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

于 2012-08-22T21:03:59.983 回答