Loading images sequentially

Question

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.

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.

Being so, is there a way of loading the images only when the previous one has been loaded?

Here's my html.

  <div class="item active">
    <img src="./img/1.jpg" alt="" />
    <div class="container">
      <div class="carousel-caption">
      </div>
    </div>
  </div>
  <div class="item">
    <img src="./img/2.jpg" alt="" />
    <div class="container">
      <div class="carousel-caption">
      </div>
    </div>
  </div>
  <div class="item">
    <img src="./img/3.jpg" alt="" />
    <div class="container">
      <div class="carousel-caption">
      </div>
    </div>
  </div>
  <div class="item">
    <img src="./img/4.jpg" alt="" />
    <div class="container">
      <div class="carousel-caption">
      </div>
    </div>
  </div>

And my js:

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;

EDIT: The carousel is bootstrap based!

EDIT 2 & SOLUTION:

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

Thanks guys!!

Here's the js:

$(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('<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;"></div>');
        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()});
            });
            }
        }
    });
});

And relevant html:

<div id="preloader">
  <div id="status"></div>
</div>


<div id="carousel-example-generic" class="carousel slide" data-ride="0">

  <!-- Wrapper for slides -->
   <div class="carousel-inner" id="carousel-inner"></div>

</div>

Answer 1

Try loading images using javascript and append to html when it finish. Something like this:

HTML

<div id="carousel">
</div>

JS (using jQuery)

$(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"];    
    var numImagesLoaded = 0;

    $.each(images, function(k, v) {
        image_temp = new Image();
        image_temp.src = v;
        image_temp.onload = function () {
            $('#carousel').append('<div class="item"><img width="100" height="100" src="'+v+'" alt="" /><div class="container"<div class="carousel-caption"></div></div></div>');
            numImagesLoaded++;
            if(numImagesLoaded == 4)    {
                //carousel
            }
        }
    });
});

Example: http://jsfiddle.net/hD3Sc/