HTML5 swipe.js 和 CSS3 transitions；页面元素的离线渲染和缓存

Question

我正在制作一个适用于平板电脑和桌面电脑的 HTML5 杂志，使用了 swipe.js (http://swipejs.com)。一切似乎都很顺利，在一个 HTML 页面中，我已经将全屏列表元素并排设置。整个杂志是在一个静态 HTML 文件中构建的。我可以通过在平板电脑上滑动或在桌面版中使用按钮来滑动页面（考虑在 swipe.js 主页上的示例，但这里是全屏幻灯片）。这些页面放置在彼此相邻的位置，并具有屏幕的大小。

[ |0||1||2| .. |i-1||i||i+1| .. |n| ]

swipe.js使用translate3d() css函数结合css3实现过渡效果。在这种情况下，使用硬件渲染。

在桌面端（Chrome、Safari、FF）、iPad1和iPad2上，这产生了我所期望的平滑过渡效果，完美无缺！然而，在iPad3上，第一次进入（通过过渡）页面时，页面似乎会呈现出“缓慢”的状态。即使没有设置背景图片（只有颜色），过渡页面的“渲染”也被认为是有点“慢”的，页面是由“闪烁”的块构建起来的。

假设： 通过阅读相关主题后，我的假设是，这是因为浏览器仅呈现屏幕中可见的元素，并将缓存滑动的页面仅用于一段时间，之后清除缓存以控制内存管理。

我的问题：是否有一种方式可以控制屏幕外呈现和缓存，以便我可以强制预先呈现页面元素i-1、i+1（并清除所有其他页面元素的缓存），以加快我的过渡渲染？

注意：在StackOverflow的几个主题中，提到了css3过渡的“闪烁”。我已经实现了建议的CSS技巧，但不能解决我的问题。

-webkit-backface-visibility: hidden;
-webkit-transform:translate3d(0,0,0);

- Sebastiaan Ordelman

---

堆叠页面时使用 z-index 有帮助吗？ - tim peterson

请看这个链接：http://jquerymobile.com/demos/1.2.0/docs/pages/page-cache.html。 - Esteban

晚点的评论： @Tim：堆叠不起作用，页面仍然在内存中。 - Sebastiaan Ordelman

@Esteban：这似乎是一种类似的方法（基于DOM）。从DOM中删除也会从内存中删除。您可能需要重新加载整个DOM部分。 - Sebastiaan Ordelman

Answer 1

最终的解决方案是对Swipejs进行了一些修改，我添加了一个名为'hideOthers()'的方法，将样式可见性设置为“hidden”，这将从硬件内存中卸载页面。

hideOthers: function(index) {
  var i = 0;
  var el;

  for( i in this.slides ) {
      el = this.slides[i];
      if ( el.tagName == 'LI' ) {
          // Show pages i-1, i and i+1
          if ( parseInt(i) == index
             || (parseInt(i) + 1) == index
             || (parseInt(i) - 1) == index
          ) {
              el.style.visibility = 'visible';
          }
          else {
              el.style.visibility = 'hidden';
          }
      }
   }
}

我已经在'slide（）'方法中添加了以下触发器作为最后一行

// unload list elements from memory
var self = this;
setTimeout( function() { self.hideOthers(index); }, 100 );

只需使用translate3d就可以开启硬件加速（如我上面的问题中所述）：

-webkit-transform:translate3d(0,0,0);

您可以在此处找到结果（包括用于垂直滚动的iScroll）这里。

- Sebastiaan Ordelman

---

嗨，我知道这是一个旧帖子，但我和你有完全相同的问题。我正在尝试理解swipe.js默认缓存多少幻灯片，并且我发现您预先缓存下一张和上一张幻灯片的方法非常有趣。但是我查看了您的链接，在我的Chrome浏览器上出现了大量闪烁，而在iPhone5上似乎太重，很难滑动，滑动事件存在延迟。那是您的最终版本并修复了所有问题吗？谢谢 - Sgotenks

是的，这就是最终结果。我无法重现那种行为 - 在多个操作系统和浏览器上进行了测试。该系统可以进行大量优化（正在进行其他项目的工作）。 重要的不是幻灯片的数量，而是加载在内存中的区域（通过硬件加速）。因此，理论上，一个页面对于移动设备来说已经太重了。 - Sebastiaan Ordelman

Answer 2

关于触发硬件加速的webkit backface/translate3d属性，我读到在iOS 6+中，它们与之前的版本不太一样，并且（更重要的是）需要将硬件加速应用于正在被动画化的元素以及任何与其重叠/重叠的元素。

参考资料（不多）：http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/ 公平地说，这相当具有个人经验性质，由于时间紧迫，我自己无法解决闪烁问题，但这可能是朝着正确方向的一个指引。

- 1nfiniti