0

在一个网站上,我有一个用于控制图像序列的滑块(我使用的是 jQuery UI 的滑块)。图像在页面背景中全屏显示(我使用的是背景尺寸:封面)。在我的开发 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 窗口大小相同时,性能会更好。但是相对于原始图像大小,图像被拉伸(或压缩)越大,我得到的延迟就越大。

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

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

4

1 回答 1

0

我今天使用画布而不是每帧的 HTML 元素列表进行了测试。它在 Chrome 中产生了非常好的性能。画布解决方案的缺点是它不适用于 IE8,但对于这个项目,我们在 Chrome 上的用户比在 IE8 上的用户多得多,所以我可以忍受。

这有助于我绘制画布:HTML5 中的逐帧动画与画布

剩下的就是简单地修改滑块更改上的画布,而不是添加和删除活动类。

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);
    }
});

我没有将所有变量定义都放在代码中以保持简洁明了,但变量名称应该足够清晰以了解它们的值。

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

于 2014-08-12T14:39:52.413 回答