Masonry if图像加载

Question

我目前正在使用下面的代码来加载所有的图像加载后的jQuery砖石。它工作得很好，而且理应如此。然而，如果我加载大量的图像，它需要一些时间来显示砖石结构。我已经尝试了多种方法来显示一种加载图像，以显示页面实际上正在加载，而不是停滞不前。如果有人可以指出我在适当的方向，如何可能使用一个If语句来检查图像是否已加载。虽然它们不是，但我想显示加载gif。一旦他们加载，我希望有砖石出现。

var $container = $('#freewall').imagesLoaded( function() {
  $container.isotope({
  });
});

很抱歉把一个简单的问题复杂化了。但是我非常感谢我能得到的任何帮助！

Answer 1

我建议在加载后立即单独显示每个图像，而不是等待完整的图像集

换句话说，你的HTML应该是这样的：

<div class="grid">
    <div class="item"> <img src="test.jpg"> </div>
    <div class="item"> <img src="test.jpg"> </div>
    <div class="item"> <img src="test.jpg"> </div>
    <div class="item"> <img src="test.jpg"> </div>
</div>

然后使用CSS隐藏您的图像，如下所示：

.item img {
   display: none;
}

接下来，使用同位素初始化栅格：

$('.grid').isotope({
    itemSelector: '.item',
    percentPosition: true,
});

最后显示在imagesLoaded的帮助下单独加载的图像，如下所示：

$('.grid').imagesLoadedMB().progress( function(instance, imageObj) {
    $(imageObj.img).fadeIn(300);
    $('.grid').isotope('layout');
});

就我个人而言，我更喜欢使用一个现成的插件，比如这个：https://codecanyon.net/item/media-boxes-portfolio-responsive-grid/5683020，它已经为我处理了所有这些事情