LightGallery前のプリローダ、Imageloadedを使用する同位体

Question

LightGalleryを使用して、ポートフォリオを表示し、カテゴリをフィルタリングするアイソトープを使用しています。私の画像は高画質であるため、ImageLoaded を使用しようとしていますが、まだjQueryを学習することはできません。 プリローダー（cssまたはgif）が表示されている間、および完了したローディングがズームインのように画像の入り口を与えるときにImageLoadedがバックグラウンドでイメージをロードするようにします。私のCodepen

$(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('*','') 
      }); 
     }); 
    }); 

これは私が作業しようとしているコードです。まだ完成していないが、私は立ち往生して次のステップを知らない。またアニメーション化されていません。

お願いします、ありがとうございます。

Answer 1

$.lightGallery()の初期化が失われました。同位体が走った後に消えるプリローダーを追加しました。私はまた#galleryをopacity: 0;で隠しており、同位体が読み込まれたときに退色する。あなたのイメージを "ズーム"する何かを書くことはやや難しいので、私はそれをあなたに任せます。 http://codepen.io/anon/pen/pRwEXg