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

回答

相關問題