2

这与图像库有关，因此当您“滑动”时，图像会从屏幕上加载和卸载，但中心图像始终会平滑显示。

它是从这里描述的 swipeview 库派生的代码：http: //cubiq.org/swipeview

问题是，在 javascript 在触摸结束事件中设置 webkitTransform 和元素实际开始在屏幕上动画之间存在 100-200 毫秒的延迟。

这种有问题的延迟只会间歇性地发生；在卸载/加载大约 15-20 张幻灯片后，它似乎开始持续发生。

在触摸移动事件中有这样的代码：

element.style.webkitTransitionDuration = 0
element.style.webkitTransform = "translate3d( etc. ) "

而且这个功能非常快，因此如果您在 ipad 上移动手指，元素会精确且“立即”跟随您的手指。

在触摸结束事件中有这样的代码：

element.style.webkitTransitionDuration = '<some_number>ms';
element.style.webkitTransform = "translate3d( etc. ) "

触摸结束事件就是问题所在。touch End 事件本身会在手指从 ipad 上移开的那一刻触发，但是，当问题发生时，css 更新不会触发屏幕上的实际动画，直到出现上述问题延迟之后。

4

1 回答 1

3

这是一个棘手的问题。我终于找到了罪魁祸首。在我的 touchend 事件监听器中，我调用了一个向 DOM 元素添加类的函数。这导致 Safari 需要一些时间将纹理重新连接到 GPU，从而导致卡顿。删除那些直接的 className 更新使它再次变得非常顺利（我仍在使用 requestAnimationFrame 而不是 CSS 过渡）。

我将我的 className 更改移动到从 touchend 触发的单独事件中，它不会导致任何性能问题。因此，如果您必须设置类，请不要直接在 touchend 回调中进行设置。改为触发另一个事件或在 requestAnimationFrame 中设置类。

于 2012-11-19T08:13:33.567 回答