jquery - 如何优化 Chrome 中的图像序列？

Question

在网站上，我有一个用于控制图像序列的 slider (我使用的是 jQuery UI 的 slider )。图像在页面背景中全屏显示(我使用的是 background-size: cover)。在我的开发 PC 上，它运行完美，但当我在功能较弱的计算机上尝试时，它很慢。

我处理序列的方式非常简单。这是我的一些代码，可以大致了解我在做什么。 (我认为该代码对我的问题来说不是必需的，但我还是添加了它......请随意跳过!)

HTML:

<div id="animation">
    <div class="frame frame0"></div>
    <div class="frame frame1"></div>
    <div class="frame frame2"></div>
    [...]
    <div class="frame frame20"></div>
</div>

CSS:

#animation {
    height: 100%;
    position: relative;
    width: 100%;
}
#animation div.frame {
    background-position: center center;
    background-size: cover;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}
#animation div.frame.active { z-index: 2; }
#animation div.frame0 { background-image: url(frame0.jpg); }
#animation div.frame1 { background-image: url(frame1.jpg); }
[...]
#animation div.frame20 { background-image: url(frame20.jpg); }

jQuery:

var $frames = $('#animation').find('div.frame');
$('#slider').slider({
    value: 1,
    min: 1,
    max: 21,
    step: 1,
    slide: function(event, ui){
        $frames.removeClass('active').filter(':eq(' + (ui.value - 1) + ')').addClass('active');
    }
});

通过测试不同的东西，我设法找出了导致 Chrome 性能问题的原因。罪魁祸首是背景大小:封面。一旦删除背景大小属性并使用图像默认大小，我几乎没有延迟。

当我使用 background-size: cover 并且我的图像与我的 Chrome 窗口大小大致相同时，性能更好。但是相对于原始图像尺寸，图像被拉伸(stretch)(或压缩)得越大，我得到的延迟就越大。

到目前为止，我唯一可以优化的方法是使用不同的图像大小，并使用 JavaScript 以更接近浏览器窗口的大小加载序列，并希望它不会延迟。这意味着如果用户调整浏览器窗口的大小，我可能不得不重新加载另一个图像工具包。

知道如何优化 Chrome 中的图像序列以获得更好的性能吗？

Answer 1

我今天使用 Canvas 而不是每个框架的 HTML 元素列表进行了测试。它在 Chrome 中产生了非常好的性能。 canvas 解决方案的缺点是它在 IE8 中不起作用，但对于这个元素，我们在 Chrome 上的用户比在 IE8 上的用户多得多，所以我可以接受。

这有助于我绘制 Canvas :Frame by frame animation in HTML5 with canvas

剩下的就是在 slider 变化时简单地修改 Canvas ，而不是添加和删除事件类。

var arrFrames = [];
for(var i = 0; i < 21; i++){
    arrFrames[i] = new Image();
    arrFrames[i].onload = function() { /* check that all images are loaded before allowing the animation on the slider */ }
    arrFrames[i].src = 'frame' + i + '.jpg';
}

$('#slider').slider({
    value: 0,
    min: 0,
    max: 20,
    step: 1,
    slide: function(event, ui){
        /* Calculate image size and ratio */
        ctx.clearRect(0, 0, iCanvasWidth, iCanvasHeight);
        ctx.drawImage(arrFrames[ui.value], 0, 0, iWidth, iHeight);
    }
});

我没有将所有变量定义都放在代码中以保持代码简洁明了，但变量名称应该足够清晰，以便理解它们具有什么值(value)。

我意识到一件重要的事情:不要忘记在 javascript 中设置 Canvas 的宽度和高度。仅在 CSS 中设置它只会拉伸(stretch)它。