title: jQuery Preloading images for animation
body: <p>I know there are heaps of jQuery preloading threads, and I've read through most of them but still can't seem to find the solution to my problem.</p>
  
  <p>I have a "stop motion" animation which is built via jQuery using queue and based on the sequential naming of images.  I don't want to run this animation until all the images required for it have been loaded. Spriting is not an option at the moment as there are different animations for different product types, and all the images have already been generated by the client.</p>
  
  <p>My preload code at the moment is as below:</p>
  
  <pre><code>function preloadImages($img, $frames){
      var $imgsrc = $img.attr("src");
      var $getext = $imgsrc.split('.');
      var $ext = $getext[1];
      var $exploded = $getext[0].split('_');
      var $newsrc = "";
      for (var i=1; i &lt;= $frames; i++){
          for (var j=0; j &lt; $exploded.length-1; j++){
              $newsrc = $newsrc + $exploded[j] + "_";
          }
          $newsrc = $newsrc + i + "." + $ext;
          var image_preload = new Image();
          image_preload.src = $newsrc;
      }
  }
  </code></pre>
  
  <p>Where frames is the number of total images in the sequence (6 or 12 at this stage), and the naming convention for images is as follows: </p>
  
  <p>Brand_Product_Category_ProductID_SequenceNo.jpg.</p>
  
  <p>What I'm trying to do is not load up the div holding the starting image until all of these images have been preloaded using the snippet below in document ready, but this doesn't seem to be working correctly, i.e., the holder is shown before all the required images have been preloaded, and consequently the animation doesn't run smoothly.</p>
  
  <pre><code>$(".holder").hide();
  preloadImages($(".holder img"), 6);
  $(".holder").fadeIn("slow");
  </code></pre>
  
  <p>I guess I need some sort of callback, though I'm not sure how to implement it.</p>