Wie kann ich eine Fortschrittsanzeige mit Prozentsatz?

Ich möchte erstellen Sie eine Fortschritt-bar mit jquery oder javascript, der Sie findet, den Prozentsatz beim laden der javascript-Dateien. Alle Bilder geladen sind, in der javascript, die Sie verwenden die jquery append-tag und so möchte ich load all diese Bilder mit einem Bildschirm, der angezeigt wird, mit einem Ladebalken mit Prozentangabe, wie viel von der die Daten geladen wurden. Was ist der beste Weg, dies zu tun?

Erhalten Sie möglicherweise eine bessere Antwort, wenn Sie nur gefragt, wie der aktuelle Fortschritt beim laden eines Bildes und nicht der progress-bar erwähnt.

InformationsquelleAutor James | 2012-01-31

javascript jquery

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

saubere Lösung, thx

InformationsquelleAutor Roko C. Buljan

2

Könnten Sie benutzen Sie einfach den jQuery UI Progress Bar

ich bin auf der Suche nach, wie man den tatsächlichen Prozentsatz
dies ist nicht wie flash, dass wir das bytesTotal und bytesLoaded stackoverflow.com/questions/399641/ajax-page-download-progress. ajax hat nur status-codes ibm.com/developerworks/web/library/wa-ajaxintro3 der einzige Weg, können Sie berechnen in Prozent wie viele Bilder geladen haben über die gesamten Bilder. wenn Sie laden 5 Bilder und zählen jede Zeit, jeder ist geladen, Sie bekommen 20%.. 40%.. 60%.. 80%.. 100% und nicht 0-100 in 100-Schritten.

InformationsquelleAutor Gabe
0

Eltern div durch den ausbau von Kind span für den Fortschritt. Auch, als Sie noch nicht jeder code, weder I.

InformationsquelleAutor tekknolagi

hier ist die 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();

InformationsquelleAutor Ali Demirci

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.