Javascript/Jquery Image preloader with isotope

Question

I am using the isotope jQuery plugin as a sort of gallery filter.

I have 80 pictures that are either 300px x 200px or 200px x 300px, the issue i am having is that the isotope container that holds the images when clicking on the gallery tab somehow overlaps them as they are loading. It sometimes cant load all the images before the page stops loading you can see my site i am building here cake decadence . i was reading up about pre-loading images i read this stack overflow question here and he recommended image pre loader which i tried but its not working.

My html looks like this

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

I put this in my isotope file for the page

$(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 
});
});

Is there any way that i could eaither pre-load the images with in the whole container div and have the spinner floating in the container , or could i get it so that the container to pre-load the image sizes so that they dont sit on eachother?

sorry if this is a noob question i have been reading the isotope docs for the last little while and cant get my head around it.

Answer 1

I was hacking on it and i figured out how to do it.

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

The pre-loader plugin can work on container type divs, just selecting the div will pre-load all its children one at a time. To get the image to stop layering on top of each other just have the js

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

load like this that will solve that issue.

High fives to all who tried to help sory about my data running out. :)