Question

我想做的是，当您单击page-gallery--thumbnails li类时，当前缩略图应该传递到#big-image div并显示预加载器，然后预览从{{1} }。

以下代码有效，但效果不理想，当前发生的情况是单击缩略图时，同一图像加载到page-gallery--thumbnails li，但在预加载程序之前加载，因此破坏了整个交互。

我是JavaScript和jQuery的新手。我曾担任设计师，但我想知道我在这里做错了什么。有人可以解释一下

我尝试了jQuery #big-image方法，但未能解决。有人可以帮我解决这个问题吗？

.onload()

}）;

Answer 1

尝试在fadeOut回调函数中设置图像；

$('.preloader').fadeIn('fast', function(){
  $('.preloader').delay(150).fadeOut('slow', function() {
    $('#big-image picture img').attr('src',image);
    $('#big-image picture source').attr('srcset',image);
  });
});

Answer 2

大家好，我已经按照自己的意愿整理了问题。也感谢@eric的支持。

变通

//--Thumbnail onclick image change 
  $('.page-gallery--thumbnails li').each(function() {
    let image = $(this).data('source');

$(this).on('click',function (){

  $('.preloader').fadeIn('fast', function(){

    $('.preloader').delay(150).fadeOut('slow',);
    $('#big-image picture img').attr('src',image);
    $('#big-image picture source').attr('srcset',image);
  });
});

}）;

当您将整个代码块放在.each (function () {});中时，这将对其进行整理。

Definition of $.each()

$。each（）函数可用于遍历任何集合，无论它是对象还是数组。对于数组，每次回调都会传递一个数组索引和一个对应的数组值。

预加载器后如何加载图像

2 个答案: