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

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

Answer 2

你可以使用jQuery UI Progress Bar

Answer 3

父 div 和扩展子 span 以获得进步。另外，由于您没有提供任何代码，我也没有。

Answer 4

这里是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();