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