1

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>
Eric Mitjans
  • 1,939
  • 5
  • 32
  • 58
  • 1
    Which library are you using for the carousel? – surfmuggle Feb 01 '14 at 21:34
  • To get help from broader javascript audience, you may want to show the exact mechanism of triggering the load. I am not familiar with the plugin you're using, but in general you might be able to change an asynchronous download to synchronous (or batches of asynchronous) and control the order that way. One technique you might want to consider is so-called deferred execution/promises, which allows you to "chain" discrete, dependent actions. I don;'t want to put this in an answer, as it's not clear where the images are being loaded - highly probable that the plugin is doing it. – G. Stoynev Feb 02 '14 at 03:02
  • ^yes because we'll decide what is "relevant code" and what isn't. THANK YOU. – Deryck Feb 02 '14 at 03:03

1 Answers1

3

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/

Luis Lorenzo
  • 76
  • 4