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

How can I create a progress bar with percentage?

提问by James

I want to create a progress bar with jquery or javascript that finds the percentage while loading the javascript. All the images are loaded in the javascript, they use the jquery append tag and so I want to load all these images with a screen that is shown with a loading bar based on percentage of how much of the data has been loaded. What is the best way to do this?

我想用 jquery 或 javascript 创建一个进度条，在加载 javascript 时找到百分比。所有图像都加载在 javascript 中，它们使用 jquery append 标记，所以我想用一个屏幕加载所有这些图像，该屏幕显示一个基于加载数据百分比的加载条。做这个的最好方式是什么？

采纳答案by Roko C. Buljan

jsBin demo

jsBin 演示

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();
    }
});

回答by Gabe

You could just use the jQuery UI Progress Bar

你可以只使用jQuery UI Progress Bar

回答by tekknolagi

Parent divwith expanding child spanfor progress. Also, as you haven't provided any code, neither have I.

父母div与扩大孩子span进步。另外，由于您没有提供任何代码，我也没有。

回答by Ali Demirci

here is the demo

这是演示

var bar_length = 300;
var bar_height = 30;
var bar_color = "red";
var bar_background = "white";
var bar_border = "blue";
var window_background = "black";
var window_border = "blue";
var text_color = "blue";
var display_close_button = 1;
var wait = 5E3;
var more = 0;
var doneyet = 0;
function setup_bar() {
  window_width = bar_length + 50;
  window_height = bar_height + 50;
  if(document.all) {
    bar_height2 = bar_height - 2;
    bar_width2 = bar_length + 3
  }else {
    bar_height2 = bar_height;
    bar_width2 = bar_length + 1
  }
  document.write('<div id="bar_window" style="position: absolute;' + "top: " + (screen.height - window_height) / 2 + "px" + ";left: " + (screen.width - window_width) / 2 + "px" + ";border: 2px solid " + window_border + ";background-color: " + window_background + ";width: " + window_width + "px" + ";height: " + window_height + "px" + ";color: " + text_color + ';" onClick="close_bar()">');
  if(display_close_button) {
    document.write('<div style="position=absolute;' + "top: 0" + "px" + ";left: 0" + "px" + ";width: " + (window_width - 3) + "px" + ";background-color: " + window_background + ";color: " + text_color + ";text-align: right" + ';">');
    document.write("[X]</div>")
  }
  document.write('<div id="empty_bar" style="position: absolute;' + "top: " + 25 + "px" + ";left: " + 25 + "px" + ";border: 1px solid " + bar_border + ";background-color: " + bar_background + ";width: " + bar_width2 + "px" + ";height: " + bar_height + "px" + ';">');
  document.write("</div>");
  document.write('<div id="bar" style="position: absolute;' + "top: " + 26 + "px" + ";left: " + 26 + "px" + ";background-color: " + bar_color + ";width: " + 0 + "px" + ";max-width: " + bar_width2 + "px" + ";height: " + bar_height2 + "px" + ';">');
  document.write("</div>");
  document.write('<div id="percent" style="position: absolute;' + "top: " + 25 + "px" + ";width: " + window_width + "px" + ";text-align: center" + ";vertical-align: middle" + ";color: " + text_color + ";font-size: " + bar_height + "px" + ';">');
  document.write("0%");
  document.write("</div>");
  document.write("</div>")
}
function progress_bar() {
  var image_count = document.getElementsByTagName("img").length;
  var image_array = document.getElementsByTagName("img");
  var bar_part = Math.round(bar_length / image_count);
  var bar_perc = Math.round(100 / image_count);
  var new_width = 0;
  var j = 0;
  var percent = 0;
  for(var i = 0;i < image_count;i++) {
    if(image_array[i].complete) {
      percent = percent + bar_perc;
      new_width = new_width + bar_part;
      j++
    }
  }
  if(new_width <= parseFloat(document.getElementById("bar").style.width) && new_width < j * bar_part + bar_part) {
    more = more + 0.5;
    new_width = new_width + Math.round(more);
    percent = percent + Math.round(more)
  }else {
    more = 0
  }
  if(percent > 100) {
    percent = 100
  }
  document.getElementById("percent").innerHTML = percent + "%";
  document.getElementById("bar").style.width = new_width + "px";
  if(j < image_count || j == 0 || doneyet == 0) {
    setTimeout("progress_bar();", 500)
  }else {
    setTimeout("close_bar();", 500)
  }
}
function close_bar() {
  document.getElementById("bar_window").style.visibility = "hidden"
}
if(document.readyState) {
  document.onreadystatechange = checkstate
}else {
  if(document.addEventListener) {
    document.addEventListener("DOMContentLoaded", saydone, false)
  }
}
function checkstate() {
  if(document.readyState == "complete" || document.readyState == "complete") {
    doneyet = 1
  }
}
function saydone() {
  doneyet = 1
}
setTimeout("saydone();", wait);
setup_bar();
progress_bar();