Javascript/Jquery Предварително зареждане на изображения с изотоп

Използвам приставката isotope jQuery като нещо като филтър за галерия.

Имам 80 снимки, които са или 300px x 200px, или 200px x 300px, проблемът, който имам, е, че контейнерът с изотопи, който съдържа изображенията, когато щракнете върху раздела галерия, някак си ги припокрива, докато се зареждат. Понякога не може да зареди всички изображения, преди страницата да спре да се зарежда, можете да видите моя сайт, който изграждам тук cake decadence. четох за предварително зареждане на изображения, прочетох този въпрос за препълване на стека тук и той препоръча програма за предварително зареждане на изображения, която опитах, но не работи.

Моят 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