2

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

<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/

补充说明

  • 我尝试通过画布调整图像大小并将图像 src 设置为 canvas.toDataUrl()，但它似乎没有帮助。也许我应该尝试网络工作者？
  • 我已经在使用 3D 变换。
  • 应用了所有 CSS hack，translate3d，perspective: 1000（这在 Chrome 中似乎有很大帮助）。
  • 背面可见性：隐藏会导致不需要的副作用，例如只显示图像的一部分。
  • 在 img 元素本身上启用 3D 有助于 chrome，但对 iOS 中的动画性能有不利影响。幸运的是，有一个 window.chrome 对象可以很容易地检测到 chrome。

铬时间轴

Chrome 时间线显示图像绘制大约需要 200 毫秒

4

1 回答 1

1

尝试使用 requestAnimationFrame 而不是 setTimeout

于 2013-04-08T13:55:46.667 回答