I am trying to make a progress bar which gets completed when all the images are loaded. It works fine in chrome but not in firefox. I googled but could not find any relevant bug or workaround. Below is the code:
;(function(){
function id(v){return document.getElementById(v); }
function loadbar() {
var ovrl = id("overlay"),
prog = id("progress"),
stat = id("progstat"),
img = document.images,
c = 0;
tot = img.length;
for(var i=0; i<tot; i++) {
var tImg = new Image();
tImg.src = img[i].src;
tImg.onload = (function(j){
return function(){
c++;
var perc = ((100/tot*c) << 0) +"%";
prog.style.width = perc;
stat.innerHTML = "Loading "+ perc;
if(c===tot){
ovrl.style.opacity = 0;
setTimeout(function(){
ovrl.style.display = "none";
//var vid = document.getElementById("video_background");
//vid.play();
}, 1200);
}
}
}(i));
tImg.onerror = (function(j){
return function(){
c++;
var perc = ((100/tot*c) << 0) +"%";
prog.style.width = perc;
stat.innerHTML = "Loading "+ perc;
if(c===tot){
rovrl.style.opacity = 0;
setTimeout(function(){
ovrl.style.display = "none";
//var vid = document.getElementById("video_background");
//vid.play();
}, 1200);
}
}
}(i));
}
}
document.addEventListener('DOMContentLoaded', loadbar, false);}());
when I put breakpoints in firefox, I realized that if condition(if(c===tot)) returns true even if c is less than tot. This seems to be a bug in firefox.
Aucun commentaire:
Enregistrer un commentaire