我想用jquery或javascript创建一个进度条,在加载javascript时找到百分比。所有图像都加载到javascript中,它们使用jquery append标记,所以我想用一个屏幕加载所有这些图像,该屏幕根据加载了多少数据的百分比显示加载栏。这样做的最佳方式是什么?
答案 0 :(得分:2)
答案 1 :(得分:1)
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();
}
});
答案 2 :(得分:0)
家长div
,其中包含扩展子span
以获取进度。此外,由于您还没有提供任何代码,我也没有。
答案 3 :(得分:0)
这是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();