How to Load image after the preloader

Question

What I wanted to do is when you click the page-gallery--thumbnails li class current thumbnail image should be passed to #big-image div and show the pre-loader and then preview the image which pass from page-gallery--thumbnails li .

Following code works but not in a satisfied level, What currently happens is when you click the thumbnail, the same image loads to #big-image but it loads before the pre-loadeder so it ruins the whole interaction.

I am new to JavaScript and jQuery. I worked as a designer but I wanted to know what did I do wrong here. Can someone please explain this

I have tried jQuery .onload() method but failed to work it out. Can someone please help me to solve this issue?

//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

Try setting the image within the fadeOut callback function;

$('.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

Hey guys I have sort the issue by my self. Thanks @eric for your supports as well.

Work around

//--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);
  });
});

});

When you put the whole code block inside a .each (function () {}); this will sort it out.

Definition of $.each()

$.each() function can be used to iterate over any collection, whether it is an object or an array. In the case of an array, the callback is passed an array index and a corresponding array value each time.