Question

我用缩略图制作了幻灯片。

这里，基本上是显示图像的div，在点击特定缩略图之后，它的相关图片将动态显示在主div（#display #slideshowpic）中。这是代码示例，

<div id="container">
    <div id="display">
      <img id="slideshowpic" src="initial.jpg">
    </div>

    <div id="thumbs">
      <img class="thumb" id="image1">
      <img class="thumb" id="image2">
      <img class="thumb" id="image3">
      <img class="thumb" id="image4">
      <img class="thumb" id="image5">
   </div>
</div>

这是javascript，

$('.thumb').click( function() {
        $('#slideshowpic').attr('src',"");   /// clears or removes current image
        $('#slideshowpic').attr('src',"/uploads/" + $(this).attr('id') + ".jpg");
});

此处，点击缩略图后要在主div中加载的图像为progressive image，与php gd相关。

这在firefox中完美运行。单击缩略图后，图像会立即显示在主div中，并带有渐进式效果。但它似乎并没有在chrome中发挥作用。

问题是（chrome）：点击缩略图后;首先根据代码清除图像，然后显示上一个图像而不是新图像（点击图像），然后在花费一些时间延迟后显示新图像（我认为延迟是新的时间）图像正在加载）。

谷歌浏览器在完全加载图像之前不显示图像

我无法弄清楚问题出在哪里。我应该使用另一种技术加载动态图像..？请帮忙。我很多天都坚持了下来。

编辑：您可以在以下链接中查看，

单击缩略图以加载幻灯片。

Answer 1

没有<img>的

src没有理由......

$('.thumb').click( function() {

        var img = $('#slideshowpic');
        var src = $(this).attr('id');

        img.css('opacity','0').on('load', function() { 
             $(this).fadeIn();
        }).attr('src',"/uploads/" + src + ".jpg");


});

来自Detect image load

Answer 2

似乎firefox使用图像缓存和chrome没有。我用了很棒的弹出窗口， http://dimsemenov.com/plugins/magnific-popup/ 它有一个内置的画廊预取。

Answer 3

试试这个方法：

img = new Image(); // this is important
img.src = src; // new src for the image.
img.onload = function () {
    //Your logic. Replace the original image with the new one.
};

在加载新图像时，尝试将src标记替换为新标记，而不是修改图像的img。这应该适合你。问题主要是因为chrome中的缓存。

jquery将图像加载到div奇怪的行为中

3 个答案: