html - 渲染图像时，Chrome 中的 CSS 过渡停止或不稳定

Question

我正在开发支持触摸的 html5+css3 图片库。目标设备主要是平板电脑和其他移动设备。图片很大(大约 1000x1500)，一个画廊可以包含 100 到 200 张图片。图库基本上是一个旋转木马，用户可以左右滑动以在图库中移动。它的工作方式是将图像布置在一个 div(名为 #ribbon)中，当您向左滑动时，该 div 会向左过渡，从而将下一张图像滑入 View 。

<div id="carousel">
  <div id="ribbon">
    <div class="slide"><img src=""></div>
    <div class="slide"><img src=""></div>

为了限制带宽消耗和初始加载时间，实际上只将前 10-15 个图像容器插入到 html 中。当您滑动到轮播的中心时，第一个图像容器会跳到轮播的末尾，并在动画结束时加载新图像。在 Safari 和 iOS 上，这就像黄油一样流畅。

我知道最好不要不必要地接触 DOM，尤其是在运行 CSS 转换时，代码在这方面应该是最优化的。但是尽管如此，在 Chrome(桌面版和 Android 版)中，每次设置下一个图像 src 时，动画都会出现问题。我可以在开发人员工具中看到这一点，显然导致打嗝的事件是图像大小调整和渲染。

为了尽量使动画更流畅，每次拖动事件开始时，所有图像(当前、左侧和右侧除外)都设置为白色 gif 像素。当您在图库中快速滑动时，这也会有所帮助，因为它会跳过加载不必要的图像。

有没有办法缓解这个问题？

jsFiddle 示例

一个简化的例子。不确定这是否足以证明问题，但我尝试对滑动事件计时以中断图像解码和渲染。

http://jsfiddle.net/YevMC/

附加说明

• 我尝试通过 Canvas 调整图像大小并将图像 src 设置为 canvas.toDataUrl()，但它似乎没有帮助。也许我应该试试网络 worker ？
• 我已经在使用 3D 转换了。
• 应用了所有 CSS hack，translate3d，perspective: 1000(这似乎在 Chrome 中有很大帮助)。
• backface-visibility: hidden 会导致不必要的副作用，例如仅显示图像的一部分。
• 在 img 元素上启用 3D 本身有助于 chrome，但对 iOS 中的动画性能有不利影响。幸运的是，有 window.chrome 对象可以轻松检测 chrome。

Chrome 时间轴

Answer 1

尝试使用 requestAnimationFrame 而不是 setTimeout