Предварительный загрузчик изображений Javascript/Jquery с изотопом

Я использую плагин isotope jQuery в качестве фильтра галереи.

У меня есть 80 изображений размером 300 x 200 пикселей или 200 x 300 пикселей, проблема заключается в том, что изотопный контейнер, в котором хранятся изображения при нажатии на вкладку галереи, каким-то образом перекрывает их при загрузке. Иногда он не может загрузить все изображения до того, как страница перестанет загружаться, вы можете увидеть мой сайт, который я создаю, здесь декаданс торта. я читал о предварительной загрузке изображений, я прочитал этот вопрос о переполнении стека здесь и он порекомендовал предварительный загрузчик изображений, который я пробовал, но он не работает.

Мой 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 предварительно загружал размеры изображения, чтобы они не сидели? друг с другом?

извините, если это нубский вопрос, я последнее время читал изотопную документацию и не могу понять это.


javascript preloader jquery-isotope
person TheLegend    schedule 07.03.2013    source источник
comment
Ссылка на ваш сайт говорит, что у вас нет пропускной способности.   -  person lmortenson    schedule 07.03.2013
comment
дерьмо, я боялся, что это произойдет, это мой тестовый сайт, поэтому через несколько дней он перезагрузится с дополнительными данными.   -  person TheLegend    schedule 07.03.2013

Ответы (1)


arrow_upward
1
arrow_downward

Я взломал его и понял, как это сделать.

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

Плагин предварительной загрузки может работать с контейнерными элементами div, просто выбрав элемент div, вы предварительно загрузите все его дочерние элементы по одному. Чтобы изображение перестало накладываться друг на друга, просто используйте js

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

загрузите так, что решит эту проблему.

Дай пять всем, кто пытался помочь, извините за то, что мои данные заканчиваются. :)

person TheLegend    schedule 08.03.2013