使用对齐图库预加载图像

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

哦，男孩，第二次访问该网站时，我发现了一篇关于表演的文章;如果您添加的是.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> 

只要给父DIV一个最小高度无论你估计会是图像的平均高度和宽度100％，这取决于你的课程布局。

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