HTML5 swipe.js css3转换;离线渲染和缓存页面元素

我正在使用swipe.js（http://swipejs.com）为平板电脑和桌面构建HTML5杂志。HTML5 swipe.js css3转换;离线渲染和缓存页面元素

一切似乎工作正常，在一个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);

来源

2012-09-05 Sebastiaan Ordelman

将用'z-index'帮助堆叠页面吗？ –

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

最新评论： @Tim：堆叠不起作用，页面仍在内存中。 –

在结束时的溶液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'; 
      } 
     } 
    } 
}

..并添加作为最后一行低于触发在“滑动（）”方法

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

只有需要的translate3d以切换硬件加速（如在我的问题上面提到）：

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

你可以找到结果（包括垂直滚动的iScroll）here。

来源

2013-09-12 18:15:01

嗨，我知道这是一个旧帖子，但我有完全相同的问题。我试图了解默认情况下有多少张幻灯片swipe.js缓存，并且我发现您可以预览下一张和上一张幻灯片真正有趣的方法。但是我看了一下你的链接，在我的浏览器上，Chrome浏览器闪烁着巨大的声音，而在iphone5上它看起来很重，很难滑动，滑动事件有滞后。这是所有修复程序的最终版本吗？谢谢 – Sgotenks

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

的问候用于触发硬件加速WebKit的背面/ translate3d道具

，我读过，在iOS中6+这些不工作完全一样在以前的版本中，以及（更重要的）硬件加速不仅需要应用于正在动画的元素，还应该应用于任何重叠/重叠的元素。

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

为了公平起见，这是相当古老的，我自己无法修复我的闪烁问题 - 由于时间紧迫 - 但，这可能是在正确的方向点。

来源

2013-08-27 23:17:09 1nfiniti

HTML5 swipe.js css3转换;离线渲染和缓存页面元素

回答

相关问题