Phonegap的“onBodyLoad()/onDeviceReady()”函数与Jquery的“$(document).ready()”的关系

Posted 2023-03-31

【中文标题】Phonegap的“onBodyLoad()/onDeviceReady()”函数与Jquery的“$(document).ready()”的关系

【英文标题】：The relationship between Phonegap's "onBodyLoad()/onDeviceReady()" functions and Jquery's "$(document).ready()"

【发布时间】：2011-02-18 01:15:00

【问题描述】：

我在 android 中使用 PhoneGap + jQuery Mobile，我对 Phonegap 的“onBodyLoad()/onDeviceReady()”函数和 Jquery 的“$(document).ready()”感到困惑。

在 PhoneGap 文档中：

PhoneGap 由两个代码库组成： 本机和 javascript。虽然 本机代码正在加载，自定义 显示加载图像。然而， JavaScript 仅在 DOM 加载一次 负载。这意味着您的网络应用程序 可能会调用PhoneGap 之前的 JavaScript 函数 已加载。

PhoneGap deviceready 事件触发 一旦 PhoneGap 完全加载。后 设备已启动，您可以放心 调用 PhoneGap 函数。

通常，您需要附加一个 事件监听器 document.addEventListener 一旦 html 文档的 DOM 已加载。

在 jQuery 文档中：

虽然 JavaScript 提供负载 页面时执行代码的事件 被渲染，这个事件没有得到 触发，直到所有资产，如 图像已完全接收。 大多数情况下，脚本可以运行 一旦 DOM 层次结构已经 完全建成。处理程序通过 to .ready() 保证是 在 DOM 准备好后执行，所以 这通常是最好的地方 附加所有其他事件处理程序和 运行其他 jQuery 代码。使用时 依赖 CSS 值的脚本 样式属性，重要的是 参考外部样式表或 在之前嵌入样式元素 引用脚本。

在代码依赖加载的情况下 资产（例如，如果维度 的图像是必需的），代码 应该放在一个处理程序中 而是加载事件。

我的实验表明ready()总是早于onDeviceReady()，如何解释？我应该如何使用它们？我应该将 ready() 放入 onDeviceReady() 以确保每次通话都安全吗？

提前谢谢你。

问候， 克里斯

【参考方案1】：

$(document).ready 总是会首先触发，因为它会在所有 DOM 元素都加载后触发。图像、javascript 函数、css 等可能此时尚未加载。

所以PhoneGap 让您将onload 方法放在主体的onLoad 方法上，以便在DOM 的特定部分准备好时触发它。准备好 DOM 后，您将创建一个事件侦听器以确保 phonegap.js itself 已准备好（例如，不仅仅是应用程序 UI）。只有phonegap.js加载完成后才能使用它提供的功能。

所以是的，$(document).ready 将首先触发，但这并不意味着您可以使用 phonegap.js（“api”调用）。您不能将 $(document).ready 放在另一个函数中（据我所知），因为它是由正在加载的 DOM 触发的。您可以（但不应该）从$(document).ready 调用您的onDeviceReady 函数。这样做的问题是，如果设备实际上还没有准备好，则不会进行 api 调用。

所以我会继续使用他们设置的主体 onLoad/onDeviceReady 链。如果这需要更多详细说明，请告诉我。

【讨论】：

当桌面浏览器、移动浏览器和本机应用程序只有一个代码库时，您能否详细说明这一点。有一个可行的例子吗？