Как загрузить изображение после прелоадера - PullRequest
Новая
       19

Как загрузить изображение после прелоадера

0 голосов
/ 25 января 2019

То, что я хотел сделать, - это когда вы щелкаете текущее эскизное изображение класса 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);

});

Ответы [ 2 ]

0 голосов
/ 25 января 2019

Эй, ребята, я сам решил проблему.Спасибо @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 () {}); с этим разберусь.

Определение $.each()

$. Функция each () может использоваться для перебора любой коллекции, будь то объект илимассив.В случае массива обратному вызову каждый раз передается индекс массива и соответствующее значение массива.

0 голосов
/ 25 января 2019

Попробуйте установить изображение в функции обратного вызова 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);
  });
});
...