减少滚动页面滞后

Question

我有一个视差网站，其中有大图片。它滞后（图像是“闪烁”）滚动时。有没有这种优化。例如要缓存加载或所有图像上的所有图像？

的网站是：http://fakeheal.eu/viral/

我已经减少了图像的尺寸尽可能地。

Answer 1

对于大多数浏览器来说，处理得当的图像依然非常大。问题不在于缓存，而是试图重复绘制整个屏幕来更新所有移动的元素。一般提示：

1. 不要同时移动很多大图形元素。
2. 对于大图像，衰落非常缓慢。谨慎使用它。
3. 在大屏幕上，您可以有一个大边框（可以从一个图像制作出来），并将其余内容放在里面，这样，“活动”区域就只有1200px x 600px。这会显着提高渲染速度。

Answer 2

如果您不介意使用HTML 5和CSS3，我建议您使用translate3d转换，因为它通常使用硬件加速，它比使用javascrip或jQuery更流畅。

例如：

$('#myElement').css('-webkit-transform', 'translate3d(-50px, 0px, 0)'); 

看看：http://css3.bradshawenterprises.com/transitions/