title: Loading images sequentially
body: <p>I'm building a site with a large amount of big images (10-40, ~300kb/img), and looking for a way of loading (not displaying!) them sequentially.</p>
  
  <p>I already have a piece of js that will display and trigger the carousel once the first 3 images have been loaded (the others will load on the background while the first 3 display), buuut as the images will load asynchronously, it has no much use.</p>
  
  <p>Being so, is there a way of loading the images only when the previous one has been loaded?</p>
  
  <p>Here's my html. </p>
  
  <pre><code>  &lt;div class="item active"&gt;
      &lt;img src="./img/1.jpg" alt="" /&gt;
      &lt;div class="container"&gt;
        &lt;div class="carousel-caption"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="item"&gt;
      &lt;img src="./img/2.jpg" alt="" /&gt;
      &lt;div class="container"&gt;
        &lt;div class="carousel-caption"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="item"&gt;
      &lt;img src="./img/3.jpg" alt="" /&gt;
      &lt;div class="container"&gt;
        &lt;div class="carousel-caption"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="item"&gt;
      &lt;img src="./img/4.jpg" alt="" /&gt;
      &lt;div class="container"&gt;
        &lt;div class="carousel-caption"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>And my js:</p>
  
  <pre><code>var numImagesLoaded = 0;
  function incrementAndCheckLoading(){
      numImagesLoaded++;
      if(numImagesLoaded == 4){
        // trigger carousel
      }
  }    
  
  image1 = new Image();
  image1.src = "http://cccctanger.com/test/img/1.jpg"
  image1.onload = incrementAndCheckLoading;
  image2 = new Image();
  image2.src = "http://cccctanger.com/test/img/2.jpg"
  image2.onload = incrementAndCheckLoading;
  image3 = new Image();
  image3.src = "http://cccctanger.com/test/img/3.jpg"
  image3.onload = incrementAndCheckLoading;
  image4 = new Image();
  image4.src = "http://cccctanger.com/test/img/status.gif"
  image4.onload = incrementAndCheckLoading;
  </code></pre>
  
  <p><strong>EDIT: The carousel is bootstrap based!</strong></p>
  
  <p><strong>EDIT 2 &amp; SOLUTION</strong>:</p>
  
  <p>I've adapted Luis Lorenzo's solution to append every img to the carousel as its loaded. The only problem: the images won't append in order (1-2-3-4-...) but as they are loaded. Considering this is a little issue I can live with, the problem is solved : ))</p>
  
  <p>Thanks guys!!</p>
  
  <p>Here's the js:</p>
  
  <pre><code>$(document).ready(function () {
  var images = ["http://cccctanger.com/test/img/1.jpg", "http://cccctanger.com/test/img/2.jpg", "http://cccctanger.com/test/img/3.jpg", "http://cccctanger.com/test/img/4.jpg",
  "http://cccctanger.com/test/img/5.jpg"];    
  var numImagesLoaded = 0;
  
  $.each(images, function(k, v) {
      image_temp = new Image();
      image_temp.src = v;
      image_temp.onload = function () {
          $('#carousel-inner').append('&lt;div class="item" 
      style="position: fixed; width: 100%; height: 100%; 
      background-image: url('+v+'); background-position: 50% 50%; 
      background-repeat: no-repeat no-repeat; -webkit-background-size: 100%; 
      -moz-background-size: 100%; -o-background-size: 100%; background-size:100%; 
      -webkit-background-size:cover; -moz-background-size:cover; 
      -o-background-size:cover; background-size:cover;"&gt;&lt;/div&gt;');
          numImagesLoaded++;
          if(numImagesLoaded == 4)    {
              $('#status').fadeOut(); // will first fade out the loading animation
              $('#preloader').delay(350).fadeOut('slow', function(){
                $( "#carousel-example-generic" ).attr('data-ride', "carousel");
                $( ".item" ).first().addClass( "active" );
              }); // will fade out the white DIV that covers the website.
              $('body').delay(350).css({'overflow':'visible'});
  
              $('.carousel').carousel({
                  pause: "false",
                  interval: 10000
              });
  
              $('.carousel').css({'margin': 0, 'width': $(window).outerWidth(), 'height': $(window).outerHeight()});
              $(window).on('resize', function() {
                $('.carousel').css({'width': $(window).outerWidth(), 'height': $(window).outerHeight()});
              });
              }
          }
      });
  });
  </code></pre>
  
  <p>And relevant html:</p>
  
  <pre><code>&lt;div id="preloader"&gt;
    &lt;div id="status"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div id="carousel-example-generic" class="carousel slide" data-ride="0"&gt;
  
    &lt;!-- Wrapper for slides --&gt;
     &lt;div class="carousel-inner" id="carousel-inner"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>