我使用fullpage.js为基于html5 / css3 / jquery的Android 4.2平板电脑应用程序,我使用PhoneGap网络服务生成。在PC和模拟器上,一切都运行平稳而快速,但在平板电脑上,在各部分之间滚动非常缓慢且不连贯。幻灯片之间的滚动有点好,但也不顺畅。我在fullpage.js选项中有css3:true,我为应用程序使用了非常轻量级的图像和元素。让我们说每个部分每个卷轴加载大约50kb。我已经修复了所有部分的背景,并且它保持在没有滞后的地方,只加载了每个部分的内容变得不连贯(它看起来像是在方形补丁中加载)。 当我在平板电脑的Chrome浏览器中打开相同的html文件时,一切都运行顺畅。所以我相信它的Android默认WebView会导致这种不稳定和问题。有没有办法让它与fullpage.js一起顺利工作?
答案 0 :(得分:1)
您刚刚发布的链接在使用Chrome的PC上加载了94秒。它有很多控制台错误。
除此之外,这显然是您网站的性能问题。
您正在尝试创建巨大网站布局。 30个部分且不少于 105个幻灯片 ...
不要指望它在手机上顺畅地工作。您在1280x1024分辨率下的布局创建了一个28.170像素高度和几千像素宽度的布局。所有这些都必须在每个卷轴上移动。
如果您实现了一些延迟加载技术(甚至是部分/幻灯片内容的ajax),您可以使浏览器更容易。这样你仍然会有巨大的布局,但至少它会是空的。 查看this answer。 您甚至可以查看fullpage.js提供的lazy load选项。
此外,使用选项scrollBar:true
可能会提高性能。