javascript - 如何创建带百分比的进度条？

Question

我想用 jquery 或 javascript 创建一个进度条，在加载 javascript 时找到百分比。所有图像都在 javascript 中加载，它们使用 jquery 附加标记，因此我想用一个屏幕加载所有这些图像，该屏幕显示一个加载栏，该加载栏基于已加载数据的百分比。执行此操作的最佳方法是什么？

Answer 1

jsBin demo

var images = [
  'img1.jpg',
  'img2.jpg',
  'img3.jpg',
  'img4.jpg'
];

var imagesN = images.length;
var i = 0;

var img = new Image();
img.onload = (function(){
    for ( i = 0; i < imagesN; ++i ){
        $('#gallery').append('<img src="'+images[i]+'">');   
    }
})(i); 

var c = 0;
$("#gallery img").load(function(i){
    c++;
    var status = c*(100/imagesN)+'%';
    $("#load_status").html(status); 
    $('#loader').stop().animate({width: status},300);
    if (c === imagesN){
           $("#gallery").fadeIn(700);
       $('#load_status, #loading_bar').hide();
    }
});