如何使用jQuery顯示圖片加載欄？

Question

我的網頁上有圖片。

我想在我的頁面上顯示加載欄，顯示下載圖像的進度。

我該怎麼做？

Answer 1

我寫了一個jQuery plugin註冊圖像加載回調。

你會使用它是這樣的...

var loading = $('<div id="loading" />').appendTo('body'); 

$('body').waitForImages(function() { 
    loading.remove(); 
}, function(loaded, all) { 
    loading.html(((loaded/all) * 100) + '% loaded'); 
}); 

jsFiddle。

Answer 2

var preload = function (images, callback) { 
    var count = 0; 
    for (var i = 0, len = images.length; i < len; i++) { 
     var img = new Image(); 
     img.src = images[i]; 
     img.onload = function() { 
      var perc = ++count * (100/len) | 0; 
      if (callback) callback.call(this, perc, perc === 100); 
     }; 
    } 
}; 

的用法很簡單：

preload(['http://lorempixel.com/800/600'], function(perc, done) { 
    console.log(perc); 
    if(done) console.log('Done!'); 
    // `this` refers to each loaded image. 
});