SpriteSheets,CSS,HTML5和Safari - 为什么性能打嗝?

时间:2013-11-10 16:06:25

标签: javascript css html5 css3 safari

http://kazopark.com/3d/car/

此动画正在使用spritesheet。

此动画在Firefox和Chrome以及最新版本的IE中都可以正常使用。

然而,当谈到Safari时,它并没有像你期望的那样工作。动画速度非常慢,降至15 FPS。

有没有在所有浏览器中制作类似这样的作品,而不是故意减慢其他浏览器的速度?

我怀疑这与Safari处理大图像的方式不一致有关吗?

应该注意的是,我已将文件大小一直减少到1.8mb,低于4.3mb。它仍然没有正常播放。

动画代码:

/********************************
*         INIT ON LOAD          *
*            PUBLIC             *
*********************************/
KMS.background = function(){
var singleton = {};

this.parent;
this.imgHolder;
this.newWidth;
this.newHeight;

function init(){
    parent = document.createElement('div');
    parent.className = "KMS_div";
    parent.id = "KMS_div_Background";

    var holder = document.getElementById("KMS_div_Holder");
    holder.appendChild(parent);

    imgHolder = new Image();
    imgHolder.id = "KMS_img_SpriteSheet";
    imgHolder.src = "img/CarRoad_low2.jpg";
    parent.appendChild(imgHolder);

    newWidth = window.innerWidth / 800;
    newHeight = window.innerHeight / 600;

    imgHolder.style.width = 512 + "%";
    imgHolder.style.height = 1365.4 + "%";
}


function BeginBackground(){
    init();

    var i = 0;

    setInterval(function(){
        parent.style.left = -(100 * (i % 5)) + "%";
        parent.style.top = -(100 * (parseInt(i / 5) % 14)) + "%";
        i++;

        if(i === 63)    i = 0;

        console.log(i);

    }, 50);

    console.log("BG begin");
};

singleton.BeginBackground = BeginBackground;

return singleton;
}();

0 个答案:

没有答案