12

我正在使用 swipe.js ( http://swipejs.com ) 为平板电脑和台式机构建 HTML5 杂志。

一切似乎都运行良好，在一个 HTML 页面中，我设置了彼此相邻的全屏列表元素。整本杂志都建立在一个静态 html 文件中。我可以通过在平板电脑上滑动和使用桌面版本的按钮来滑动页面（考虑 swipe.js 主页上的示例，然后使用全屏幻灯片）。

这些页面彼此相邻放置，并具有屏幕的尺寸。

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

swipe.js 转换是在 css3 的帮助下完成的，使用 translate3d() css 函数。在这种情况下，使用硬件渲染。

在桌面（Chrome、Safari、FF）、iPad1 和（甚至更好）iPad2 上，这具有我想要的效果；平滑过渡。完美的！然而，在 iPad3 上，页面在第一次进入（通过转换）时似乎呈现“缓慢”。即使没有设置背景图像（只是颜色），过渡页面的“渲染”也被认为有点“慢”；该页面是由“闪烁”块构建的。

假设：我的假设是（在阅读主题之后），这是因为浏览器只渲染屏幕内的元素，并且只会缓存刷过的页面一段时间，然后清理缓存以控制内存管理。

我的问题：有没有办法控制屏幕外渲染和缓存，以便我可以强制（预）渲染页面元素 i-1、i+1（并刷新所有其他页面元素的缓存），以加快我的过渡渲染？

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

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

2 回答 2

4

最后，解决方案是 Swipejs 的 hack，我在其中添加了一个方法“hideOthers()”，将样式可见性设置为“隐藏”，从硬件内存中卸载页面：

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）。

于 2013-09-12T18:15:01.437 回答
0

关于用于触发硬件加速的 webkit backface/translate3d 道具，我读到在 iOS 6+ 中，这些道具与以前的版本不太一样，而且（更重要的是）不需要应用硬件加速仅在正在动画的元素上，而且在它重叠/重叠的任何元素上。

参考资料（不多）：http: //indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/

公平地说，这是相当轶事，由于截止日期紧迫，我自己无法解决自己的闪烁问题，但这可能是朝着正确方向发展的一点。

于 2013-08-27T23:17:09.990 回答