Lightgallery之前的预加载器，使用同位素Imageloaded

我使用LightGallery展示我的投资组合和同位素来过滤类别。由于我的图片质量很高，我试图使用ImageLoaded 但无法实现，仍在学习jQuery。我希望ImageLoaded能够在显示预加载器（css或gif）时在后台加载图像，并且当完成加载后，会像放大一样给图像加入一个入口。我的Codepen Lightgallery之前的预加载器，使用同位素Imageloaded

$(document).ready(function() { 
     var $gallery = $('#gallery'); 
     var $boxes = $('.revGallery-anchor'); 
     $boxes.hide(); 

     $gallery.imagesLoaded(function() { 
     $boxes.fadeIn(); 

      $gallery.isotope({ 
       // options 
       sortBy : 'original-order', 
       layoutMode: 'fitRows', 
       itemSelector: '.revGallery-anchor', 
       stagger: 30, 
       masonry: { 
        columnWidth: 200 
       } 
      }); 
     }); 

     $('button').on('click', function() { 
      var filterValue = $(this).attr('data-filter'); 
      $('#gallery').isotope({ filter: filterValue }); 
      $gallery.data('lightGallery').destroy(true); 
      $gallery.lightGallery({ 
       selector: filterValue.replace('*','') 
      }); 
     }); 
    });

这是我正在尝试使用的代码。它尚未完成，但我卡住了，不知道下一步。也不是动画。

请帮助，谢谢。

来源

2017-01-23 Kamalakannan

你失去了$.lightGallery()的初始化，所以补充说。添加了一个预加载器，我在同位素运行后淡出。我也躲在#gallery与opacity: 0;和褪色，当同位素完成加载。写一些可以“放大”图像的东西会有点棘手，所以我会把它留给你。 http://codepen.io/anon/pen/pRwEXg

来源

2017-01-23 17:43:58

Hi Micheal，托管时效果不好。 [网站]（http://sapshubli.com/gallery/）加载程序在加载图像时可见，或者只有加载程序出现，图像不会出现。检查上述网站。它与我在code – Kamalakannan

@Kamalakannan中的codepen相同，在codepen和您的个人网站之间显然不一样，但我也不会排查您的个人网站。我已经在第三方网站（codepen）上为您提供了很多帮助，但这并不是建议的，希望您可以参加我已经为您完成的工作并找出您的个人网站。 –

是的，我知道我要求更多:(。我的歉意。无论如何，谢谢你Micheal。 – Kamalakannan

Lightgallery之前的预加载器，使用同位素Imageloaded

回答

相关问题