Firefox延迟画布开始

Question

我正在此地址http://odstrony.pl/nowa_strona/创建公司网站。我的自定义预加载器出现问题（在带有请求动画帧的canvas元素上呈现）。在除Firefox之外的所有浏览器上，它的工作速度约为50 fps。为了在firefox中以aprox 50 fps呈现我的预加载器，我需要做什么（当清除站点的所有历史记录和缓存时出现问题）？

修改

这是请求anim跨浏览器代码：

window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame    ||
            window.oRequestAnimationFrame      ||
            window.msRequestAnimationFrame     ||
            function( callback ){
                window.setTimeout(callback, 1000 / 60);
            };
})();
window.cancelRequestAnimFrame = ( function(){
    return window.cancelAnimationFrame          ||
        window.webkitCancelRequestAnimationFrame    ||
        window.mozCancelRequestAnimationFrame       ||
        window.oCancelRequestAnimationFrame     ||
        window.msCancelRequestAnimationFrame        ||
        clearTimeout
})();

这是我的预装代码：

function preload(element,element_glowny){
    var self = this;

    this.frameCount = 0;
    this.fps = 60;
    this.fpsInterval;
    this.startTime;
    this.now;
    this.then;
    this.elapsed;

    this.podniesienie = 0;

    this.element_glowny = element_glowny;
    this.ctx = element.getContext("2d");
    this.ctx_width = element.width;
    this.ctx_height = element.height;


    this.logo_svg_xml;
    this.colorLogo;
    this.logo_height = 350;
    this.logo_width = 350;

    this.fala_svg_xml;
    this.colorFali;
    this.fala_height = 69;
    this.fala_width = 500;
    this.fala_x = 0;
    this.fala_y = 0;

    this.wysokosc_wody = 0;

    this.idz_w_prawo = true;

    this.fala_zakres_x_min = -100;
    this.fala_zakres_x_max = 500;

    this.ilosc_zdjec;
    this.ilosc_zdjec_zaladowanych = 0;

    this.animacjaReferencja;

    this.start = function(){

        this.fpsInterval = 1000 / this.fps;
        this.then = Date.now();
        this.startTime = this.then;

        //ustawianie startowej wysokosci
        this.fala_y = this.logo_height-this.fala_height;
        this.ilosc_zdjec = $("img").size();

        this.initSVGColors("#FFFFFF","#3B71B8");
        //this.render();
        this.glownaPetla();
    }

    this.glownaPetla = function(){
        self.animacjaReferencja = requestAnimFrame(self.glownaPetla);

        self.now = Date.now();
        self.elapsed = self.now - self.then;

        if (self.elapsed > self.fpsInterval) {
            self.then = self.now - (self.elapsed % self.fpsInterval);

            //render
            self.kontrolaFali();
            self.render();
        }
    }

    this.initSVGColors = function(colorFali,colorLogo){
        this.colorFali = colorFali;
        this.colorLogo = colorLogo;
        this.logo_svg_xml = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="350px" height="350px" viewBox="0 0 350 350" enable-background="new 0 0 350 350" xml:space="preserve"> <g> <path fill="'+colorLogo+'" d="M112.207,90.146c5.859-4.237,12.249-7.937,19.273-11.008c12.926-5.631,27.497-8.446,43.72-8.446 c16.208,0,30.711,2.815,43.511,8.446c12.776,5.644,23.682,13.259,32.677,22.864c8.991,9.603,15.896,20.693,20.718,33.233 c4.803,12.554,7.219,25.875,7.219,39.96c0,13.71-2.391,26.788-7.114,39.235c19.878,13.509,40.154,26.502,60.672,38.722 c1.743-3.759,3.496-7.506,5.001-11.444C345.946,220.666,350,198.529,350,175.315c0-23.608-4.054-45.958-12.117-67.021 c-8.072-21.051-19.653-39.643-34.737-55.756c-15.095-16.098-33.38-28.904-54.819-38.364C226.846,4.738,202.511,0,175.326,0 c-27.207,0-51.642,4.739-73.323,14.175c-16.436,7.175-30.975,16.305-43.627,27.31C74.636,56.744,92.683,73.131,112.207,90.146z"/> <path fill="'+colorLogo+'" d="M183.131,349.828c-0.448-19.223-3.971-42.534-12.35-70.697c-14.435-0.479-27.577-3.149-39.301-8.252 c-12.915-5.645-23.873-13.273-32.869-22.882c-8.998-9.587-15.901-20.677-20.712-33.231c-4.811-12.546-7.225-25.742-7.225-39.569 c0-14.084,2.414-27.406,7.225-39.959c3.32-8.653,7.706-16.575,13.021-23.826C78.901,91.801,65.477,71.068,50.426,49.114 c-1.166,1.165-2.445,2.229-3.569,3.425C31.764,68.651,20.19,87.244,12.113,108.294C4.028,129.357,0,151.707,0,175.315 c0,23.214,4.028,45.351,12.113,66.393c8.077,21.064,19.65,39.652,34.743,55.758c15.08,16.103,33.478,28.899,55.147,38.337 C123.687,345.262,148.122,350,175.326,350C177.965,350,180.55,349.913,183.131,349.828z"/> </g> </svg>';
        this.fala_svg_xml = '<svg version="1.1" id="Isolation_Mode" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500.297px" height="69.069px" viewBox="170.798 262.645 500.297 69.069" enable-background="new 170.798 262.645 500.297 69.069" xml:space="preserve"> <path fill="'+colorFali+'" d="M671.094,332.636v-35.008c0,0-53.763,34.463-125.074,34.983c-71.313-0.52-125.074-34.983-125.074-34.983 s-53.762-34.464-125.074-34.983c-71.313,0.52-125.074,34.983-125.074,34.983v35.008H671.094z"/> </svg>';
    }

    this.kontrolaFali = function(){

        this.fala_x+=8;



        if(this.ilosc_zdjec_zaladowanych != this.ilosc_zdjec){
            this.ilosc_zdjec_zaladowanych = 0;

            $("img").each( function(){
                self.ilosc_zdjec_zaladowanych += 1;
                if (this.naturalWidth === 0 || this.naturalHeight === 0 || this.complete === false) {
                    return false;
                }
            });

            var procent_zaladowania = this.ilosc_zdjec_zaladowanych/this.ilosc_zdjec*100;
            this.wysokosc_wody = (procent_zaladowania/100)*this.ctx_height-this.fala_height;
            this.podniesienie = this.ctx_height-this.wysokosc_wody-this.fala_height;

        }

        //podnoszenie fali
        if(this.fala_y+this.fala_height > this.podniesienie){
            this.fala_y -= 10;
        }
        //zakonczenie animacji
        if((this.fala_y+this.fala_height-this.fala_height).toFixed(0) == -this.fala_height){
            cancelRequestAnimFrame(this.animacjaReferencja);
            this.element_glowny.addClass("schowaj");
                $(".dynamiczny_tekst h1:last-child span").typed({
                    strings: ["PoczÄtku", "Strony"],
                    typeSpeed: 150,
                    cursorChar: "|"
                });
            setTimeout( function(){
                self.element_glowny.css({"z-index":"-1"});
            }, 300);
        }


    }

    this.render = function(){

        this.ctx.clearRect(0,0,this.ctx_width,this.ctx_height);

        this.renderLogo(this.ctx);

        this.ctx.globalCompositeOperation = "source-atop";

        this.renderFala(this.ctx);

        this.ctx.globalCompositeOperation = "source-over";

        this.renderNapis(this.ctx);


    }

    this.renderLogo = function(ctx){
        ctx.transform(1,0,0,1,0,0);

        ctx.drawSvg(this.logo_svg_xml, 0, 0, this.logo_width, this.logo_height);

        ctx.setTransform(1,0,0,1,0,0);
    }

    this.renderNapis = function(ctx){
        ctx.transform(1,0,0,1,0,0);

        ctx.font="13px Tahoma, Geneva, sans-serif";
        ctx.fillText((((this.ctx_height-this.fala_y-this.fala_height)/this.ctx_height)*100).toFixed(0)+"%",155,170);

        ctx.setTransform(1,0,0,1,0,0);
    }

    this.renderFala = function(ctx){

        if(this.fala_x > 500){
            this.fala_x = 0;
        }

        ctx.transform(1,0,0,1,this.fala_x,this.fala_y);

        ctx.drawSvg(this.fala_svg_xml, 0, 0, this.fala_width, this.fala_height);
        ctx.fillStyle = this.colorFali;
        ctx.fillRect(0,this.fala_height,this.fala_width,this.ctx_height*2);

        ctx.transform(1,0,0,1,-this.fala_width,0);

        ctx.drawSvg(this.fala_svg_xml, 0, 0, this.fala_width, this.fala_height);
        ctx.fillStyle = this.colorFali;
        ctx.fillRect(0,this.fala_height,this.fala_width,this.ctx_height*2);

        ctx.setTransform(1,0,0,1,0,0);

    }

}
//preload
jQuery(document).ready(function(){
    var loading = new preload(document.getElementById("loading-image"),$("#preload"));
    loading.start();
});