Javascript 如果图像已加载，请单击

我目前正在使用下面的代码在加载所有图像后加载jQuery。它工作得很好，而且应该如此。但是，如果我加载大量图像，则需要一些时间来显示砖石结构。我尝试了多种方法来显示一种加载图像，以显示页面实际上正在加载，而不仅仅是停滞而没有成功。如果有人能告诉我正确的方向，如何使用If语句检查图像是否加载。虽然他们不是我想显示加载的gif。一旦他们做负载，我想有砌体出现

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

---

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

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

换句话说，您的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>

.item img {
   display: none;
}

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

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

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

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

<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>

.item img {
   display: none;
}

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

---

就我个人而言，我更喜欢使用一个随时可用的插件，比如这个插件：它已经为我解决了所有这些问题

你可以在这里找到问题的答案：@kindisch谢谢！我已经在谷歌上搜索过了。但我想我没有努力寻找。