正当なギャラリーで画像をプリロード

Question

私はJustified-Gallery を使用してギャラリーのサムネイルをレイアウトしています。プレローダーを実装して、Justified-Galleryによってフォーマットされたイメージのみが表示されるようにしたいと思います。

プラグインでこのオプションが見えましたが、動作させることができませんでした（waitThumbnailsLoad）。

現在、私は、サムネイルを含むdivを隠していて、プラグインが完了したら表示しています。これが最善の方法ですか、これを行うにはより良い方法がありますか？

HTML

<div id="justify-gallery" class="hidden"> 
    // thumbnails go here 
</div> 

JS

// Justify Gallery 
$("#justify-gallery").justifiedGallery({ 
    rowHeight: 100, 
    fixedHeight: true, 
    captions: false, 
    margins: 3, 
    lastRow: 'nojustify' 
}); 

$('#justify-gallery').justifiedGallery().on('jg.complete', function (e) { 
    $(this).fadeIn(); 
}); 

Answer 1

オハイオ州の少年は、サイトに2回目の訪問でパフォーマンスに関する記事を見つけました。 .justified-galleryのクラスを追加すると、ロードされたサムネイルのみが表示されます。すべての公正さにおいて、この重要な情報はより顕著な場所に置かれていたはずです。

http://miromannino.github.io/Justified-Gallery/performance-tips/

Answer 2

はい、あなたは作品のあなたの現在のコードの並べ替えた場合、その後、あなたが親コンテナを追加することができ、右のトラックにいますhiddenクラスを使用し、読み込みアニメーションを追加してから、CSSを使用して画像の絶対位置を設定するか、ローダを非表示にします。

<div class="parent-with-loading-animation"> 
    <div class="loading-animation"></div> 
    <div id="justify-gallery" class="hidden"> 
    // thumbnails go here 
    </div> 
</div> 

ちょうどあなたが画像の平均高さ、そしてもちろん、あなたのレイアウトに応じて、幅を100％になります数える何の分の高さのdivの親を与えます。

$('#justify-gallery').justifiedGallery().on('jg.complete', function (e) { 
    $('.loading-animation').fadeOut(); 
    $(this).fadeIn(); 
});