lundi 21 septembre 2015

Progress bar based on images loaded not working in firefox

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