HTML5 swipe.js css3过渡; 屏幕外渲染和页面元素的缓存

Question

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

一切似乎工作正常,在一个HTML页面中,我已经设置了彼此全屏列表元素.整个杂志都是在一个静态的html文件中构建的.我可以通过在平板电脑上滑动以及使用桌面版本的按钮来浏览页面(请参阅swipe.js主页上的示例,然后使用全屏幻灯片).

页面彼此相邻放置,并具有屏幕的尺寸.

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

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

在台式机(Chrome,Safari,FF),iPad1和(甚至更好的)iPad2上,这具有我想要的效果; 平滑过渡.完善!但是,在iPad3上,页面第一次进入(通过转换)时似乎呈现"慢".即使没有设置背景图像(只是颜色),转换页面的"渲染"也会被认为有点"慢"; 该页面由"闪烁"块构建.

假设:我的假设是(在阅读主题之后),这是因为浏览器只呈现屏幕内的元素,并且只会暂时刷新刷过的页面,然后清理缓存以控制内存管理.

我的问题:有没有办法控制屏幕外渲染和缓存,这样我就可以强制(预)渲染页面元素i-1,i + 1(并刷新所有其他页面元素的缓存),以加快我的过渡渲染？

注意:在StackOverflow的几个主题中,提到了css3过渡的"闪烁".我已经实现了建议的CSS技巧,但不会解决我的问题.

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

Answer 1

最后，解决方案是对 Swipejs 的修改，其中我添加了一个方法“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）。