如何在预加载器后加载图像

Question

我想要做的是当你点击page-gallery--thumbnails li类时，当前缩略图应传递给#big-image div并显示预加载器，然后预览从page-gallery--thumbnails li传递的图像。

下面的代码工作但不是满意的水平，当前发生的是当你点击缩略图时，同一图像加载到#big-image但它在预先加载器之前加载，因此它破坏了整个交互。

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

我已经尝试过jQuery .onload()方法，但未能解决它。有人可以帮我解决这个问题吗？

//thumbnail clicks and it triggers as a button
$('.page-gallery--thumbnails li').on('click', function() {
var image = $(this).data('source');

$('.preloader').fadeIn("fast", function(){
  $('.preloader).delay(150).fadeOut('slow');
});

$('#big-image picture img').attr("src",image);
$('#big-image picture source').attr("srcset",image);

});

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（）函数可用于迭代任何集合，无论它是对象还是数组。在数组的情况下，回调每次都传递一个数组索引和相应的数组值。