显示载入栏以进行幻灯片放映，预加载图像，然后显示幻灯片放映

Question

我有一个简单的幻灯片，如何在幻灯片放映开始之前显示某种加载矩形？现在，在慢速连接时，幻灯片放映有点时髦，直到第一张图像完全加载。

Answer 1

你可以把一个悸动者作为背景。

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

或者，你可以......

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;

});