具有同位素的Javascript / Jquery圖像預加載器

Question

我正在使用同位素jQuery插件作為圖庫過濾器。

我有80張300px x 200px或200px x 300px的圖片，我遇到的問題是，單擊圖庫選項卡時保存圖像的同位素容器在加載時會以某種方式重疊。 在頁面停止加載之前，有時它無法加載所有圖像，您可以看到我在這里建立的站點decade廢 。 我正在閱讀有關預加載圖像的信息，我在這里閱讀了此堆棧溢出問題，他推薦了我嘗試過但未正常工作的圖像預加載器。

我的HTML看起來像這樣

<div id="image_container">
  <div id="container">
    <img class="box wed cake" src="/images/gallery/wed2.png" />
    <img class="box wed cake" src="/images/gallery/wed1.png" />
    <img class="box wed cake" src="/images/gallery/wed13.png" />
    ...
  </div>
</div>

我將其放在頁面的同位素文件中

$(document).ready(function(){
var $container = $('#container');
$container.isotope({
  filter: '',
   animationOptions: {
   duration: 750,
   easing: 'linear',
   queue: false,
   }
 });

$('#filter a').click(function(){
  var selector = $(this).attr('data-filter');
  $container.isotope({ 
  filter: selector,
  animationOptions: {
  duration: 750,
  easing: 'linear',
  queue: false,
  }
 });
return false;
});

$('.box').preloader({
  loader: '/images/loading.gif',
  fadeIn: 700,
  delay : 200 
});
});

有什么辦法可以讓我在整個container div中預加載圖像，並使微調框漂浮在container ，還是可以讓container預加載圖像大小，以免它們落在上面彼此？

抱歉，如果這是一個菜鳥問題，我最近一陣子都在閱讀同位素文檔，但無法理解。

Answer 1

我正在破解它，我想出了怎么做。

$('#container').preloader({
  loader: '/images/loading.gif',
  fadeIn: 700,
  delay : 200 
});

預加載器插件可以在容器類型div上工作，只需選擇div即可一次預加載其所有子級。 要使圖像停止在彼此之上分層，只需使用js

$(window).load(function(){ ...

這樣的負載將解決該問題。

向所有試圖幫助解決我的數據即將耗盡的人致以很高的敬意。 :)