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

On a website, I have a slider (I'm using jQuery UI's slider) that is used to control an image sequence. The images are displayed full screen in the background of the page (I'm using background-size: cover). On my development PC, it's working perfectly but when I try it on less powerful computers, it's laggy.

在网站上,我有一个滑块(我正在使用jQuery UI的滑块),用于控制图像序列。图像在页面背景中全屏显示(我使用的是背景尺寸:封面)。在我的开发PC上,它运行得很好,但是当我在功能不太强大的计算机上试用它时,它是滞后的。

The way I do my sequence is quite simple. Here's some of my code to give a general idea of what I'm doing. (I think that code is not essential for my question, but I added it anyway... Feel free to skip ahead!)

我做序列的方式非常简单。这是我的一些代码,可以大致了解我正在做的事情。 (我认为代码对我的问题不是必不可少的,但无论如何我添加了它...随意跳过!)

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

By testing different things, I managed to isolate what it causing performance issues in Chrome. The culprit is background-size: cover. As soon as I remove the background-size attribute and use the images default size, I have close to no lag.

通过测试不同的东西,我设法找出导致Chrome中性能问题的原因。罪魁祸首是背景大小:封面。一旦我删除background-size属性并使用图像默认大小,我就接近没有滞后。

When I use background-size: cover and my images are about the same size as my Chrome window, the performance is better. But the larger the images are stretched (or compressed) relative to the original image size, the more lag I get.

当我使用background-size:cover并且我的图片大小与我的Chrome窗口大小相同时,性能会更好。但是相对于原始图像尺寸拉伸(或压缩)图像越大,我得到的滞后越多。

The only lead I have so far to optimize this is to have different image sizes and use JavaScript to load the sequence in the size that is closer to the browser window and hope that it won't be laggy. And this mean that I may have to reload another image kit if the user resizes the browser window.

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

Any idea how I could optimize the image sequence in Chrome to get better performance?

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

1 个解决方案

#1

I did a test today using a canvas instead of a list of HTML elements for each frame. It results in a very good performance in Chrome. The downside of the the canvas solution is that it's not working in IE8 but for this project, we have a lot more users on Chrome than on IE8 so I can live with that.

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

This helped me with the canvas drawing: Frame by frame animation in HTML5 with canvas

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

And the rest was to simply modify the canvas on the slider change instead of adding and removing the active class.

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

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

I didn't put all variable definitions in the code to keep it short and clean, but the variable names should be clear enough to understand what value they have.

我没有在代码中放置所有变量定义以保持简洁和干净,但变量名称应该足够清楚,以了解它们具有什么价值。

One important thing I realized: don't forget to set width and height for the canvas in javascript. Setting it only in CSS will only stretch it.

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

#1