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

Question

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

谢谢!

Answer 1

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

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

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