CODEWITHSUNDEEP
jqueryhtmlcss
Roeland
Roeland

Reputation: 3858

Show load bar for slide show, preload images, then show slide show

I have a simple slideshow, how do I go about showing some sort of load rectangle before the slideshow starts? Right now on a slow connection the slide show is kinda funky until the first image fully loads.

Upvotes: 1

Views: 854

Answers (1)

alex
alex

Reputation: 490233

You could put a throbber as a background.

#slideshow {
    background: url(images/loading.gif) no-repeat center center;
}

Alternatively, you could...

var images = ['a.jpg', 'b.jpg'],
    imagesLoaded = 0,
    totalImages = images.length;

$.each(images, function(i, image) {

   var img = new Image();

   img.onload = function() {
       imagesLoaded++;
       if (imagesLoaded == totalImages) {
           // All images done
       }
   };

   img.src = image;

});

Upvotes: 2

Related Questions