使用 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 class 添加父容器，并向其添加加载动画，然后使用 css 绝对定位图像或隐藏加载程序，由您决定。

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

只需给父级 div 一个 min-height 任何你认为是图像的平均高度和宽度 100% 当然取决于你的布局。

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

Answer 2

天啊，第二次访问该站点时，我发现了一篇关于性能的文章；它指出如果您添加 class 或 .justified-gallery，它只会在加载后显示缩略图。平心而论，这一重要信息本应放在更显眼的位置。

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

使用 Justified Gallery 预加载图像

Preload images with Justified Gallery

javascript

jquery

image-preloader

preloading