スライドショーのロードバーを表示して画像をプリロードしてからスライドショーを表示

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; 

});