javascript - 使用 Justified Gallery 预加载图像

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();
});