我正在使用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);
解决方法
最后,解决方案是一个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);
您可以找到结果(包括iScroll垂直滚动)here.