Phonegap的“onBodyLoad()/onDeviceReady()"之间的关系函数和 Jquery 的“$(document).ready()"； [英] The relationship between Phonegap's "onBodyLoad()/onDeviceReady()" functions and Jquery's "$(document).ready()"

问题描述

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

I am using PhoneGap + jQuery Mobile in Android, I am confused about the Phonegap's "onBodyLoad()/onDeviceReady()" functions and Jquery's "$(document).ready()".

在 PhoneGap 文档中:

In PhoneGap documents:

PhoneGap 由两个代码库组成:本机和 JavaScript.虽然本机代码正在加载，自定义显示加载图像.然而，JavaScript 只加载一次 DOM负载.这意味着您的 Web 应用程序可能会打电话给 PhoneGap之前的 JavaScript 函数已加载.

PhoneGap consists of two code bases: native and JavaScript. While the native code is loading, a custom loading image is displayed. However, JavaScript is only loaded once the DOM loads. This means your web application could, potentially, call a PhoneGap JavaScript function before it is loaded.

PhoneGap deviceready 事件触发一旦 PhoneGap 完全加载.后设备已开火，您可以安全地调用 PhoneGap 函数.

The PhoneGap deviceready event fires once PhoneGap has fully loaded. After the device has fired, you can safely make calls to PhoneGap function.

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

Typically, you will want to attach an event listener with document.addEventListener once the HTML document's DOM has loaded.

在 jQuery 文档中:

In jQuery doc:

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

While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.

在代码依赖加载的情况下资产(例如，如果维度需要图像)，代码应该放在一个处理程序中改为加载事件.

In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the load event instead.

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

My experiments shows that ready() is always earlier that onDeviceReady(), how to explain this? How should I use them? Should I put ready() in onDeviceReady() to make every call safe?

提前致谢.

问候，克里斯

推荐答案

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

$(document).ready will always fire first because it is triggered when all the DOM elements have loaded. Images, javascript functions, css, etc. may not have loaded by this time.

因此，PhoneGap 让您将 onload 方法放在主体的 onLoad 方法上，以便它在 DOM 的特定部分准备就绪时触发.准备好 DOM 后，您将创建一个事件侦听器以确保 phonegap.js 本身 已准备好(例如，不仅仅是应用程序 UI).加载phonegap.js后才能使用它提供的功能.

So PhoneGap has you put the onload method on the body's onLoad method so that it fires when that particular part of the DOM is ready. Once the DOM is prepared, you create an event listener to ensure that phonegap.js itself is ready (and not just the application UI, for example). Only after phonegap.js is loaded can you use the functions that it provides.

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

So yes, $(document).ready will fire first, but that does not mean that you can use phonegap.js (the 'api' calls). You cannot put $(document).ready inside of another function (as far as I know), since it is triggered by the DOM being loaded. You can (but should not) however call your onDeviceReady function from $(document).ready. The problem with this is that if the device is NOT in fact ready, the api calls will not be made.

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

So I would continue to use the body onLoad/onDeviceReady chain they have set up. Let me know if this needs more elaboration.

这篇关于Phonegap的“onBodyLoad()/onDeviceReady()"之间的关系函数和 Jquery 的“$(document).ready()"；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！