在一个网站上,我有一个用于控制图像序列的滑块(我使用的是 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 中的图像序列以获得更好的性能吗?