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

是的，你是在正确的轨道，如果你当前的代码有效，那么你可以添加一个父容器到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();
});

Answer 2

哦，小伙子，在第二次访问该网站时，我发现了一篇关于性能的文章;如果你添加一个.justified-gallery类，它会说明它只会在加载后显示缩略图。平心而论，这个至关重要的信息应该放在一个更突出的位置。

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

使用Justified Gallery预加载图像

2 个答案: