滚动时减少页面滞后

Question

我有一个视差网站，里面有大图片。滚动时滞后（图像“闪烁”）。对此有任何优化吗？例如，在加载时缓存所有图像还是什么？

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

我尽可能地缩小了图像尺寸。

Answer 1

对于大多数浏览器而言，图像仍然非常庞大。问题不在于缓存，而在于尝试重复绘制整个屏幕以更新所有移动元素。一般提示：

1. 不要同时移动许多大图形元素。
2. 对于大图像，褪色非常慢。谨慎使用它。
3. 在大屏幕上，您可以拥有一个大边框（可以从一个图像制作）并将其余内容放入内部，这样“活动”区域仅为1200px x 600px。这将大大提高渲染速度。

Answer 2

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

例如：

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

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