ios - 如果使用图像，Skrollr 断断续续？

Question

我正在使用 skrollr 插件为 iOS 创建视差网页。如果我只使用文本，它会非常流畅，而且速度非常快。如果我包含带有 CSS 的背景图像或带有 HTML 的内联图像，滚动突然变得非常不稳定。有解决办法吗？任何图像都会大大减慢它的速度。

谢谢！

Answer 1

根据您的背景图像大小，css 背景图像可能会对任何页面的渲染产生高成本。这是可变的，但是背景覆盖的区域越多，成本就越高 - 因为浏览器的渲染引擎需要重新绘制屏幕的更大部分。如果您使用 Chrome 并使用开发人员工具和时间线工具，您可以看到这一点。

针对您为图像设置动画的特定情况的修复可能会进行 3d CSS 转换。IE 不进行普通变换，而是进行 3d 变换，例如“translate3d”。这将自动触发硬件渲染（即您的计算机 gpu 将处理转换）并从您的 cpu 中卸载一些开销 - 理论上使您的动画更加流畅。

这当然是有代价的，尤其是在您处理移动或其他受限平台时。但它值得一试。