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已经为我处理了所有这些

如果图像加载了砌体

1 个答案: