JQuery document.ready vs Phonegap deviceready

Estoy haciendo una aplicación de phonegap con jquery. Estoy confundido sobre si debo envolver todo mi código dentro de $(document).ready() JQuery como

 $(document).ready(function(){ //mycode }); 

o dentro del dispositivo listo para el evento de phonegap como

 document.addEventListener("deviceready", function(){ //mycode }); 

Actualmente estoy usando document.ready pero creo que puedo encontrarme con problemas si bash acceder a algunos methods API de Phonegap en document.ready .

¿Cuál es el mejor evento para ajustar mi código, document.ready o deviceready?

Debes usar el evento deviceready para evitar que pasen cosas divertidas.

El estado de los documentos:

Este es un evento muy importante que debe usar cada aplicación PhoneGap.

PhoneGap consta de dos bases de código: nativo y JavaScript. Mientras se carga el código nativo, se muestra una image de carga personalizada. Sin embargo, JavaScript solo se carga una vez que se carga DOM. Esto significa que su aplicación web podría, potencialmente, llamar a una function PhoneGap JavaScript antes de que se cargue.

El evento de generación de dispositivos PhoneGap se dispara una vez que PhoneGap se haya cargado por completo. Después de que el dispositivo se disparó, puede realizar llamadas de manera segura a la function PhoneGap.

Normalmente, querrá adjuntar un detector de events con document.addEventListener una vez que se haya cargado el DOM del documento HTML.

Lea la documentation aquí: http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html

Un punto key en la respuesta es esta línea de la documentation del evento deviceready el deviceready .

Este evento se comporta de manera diferente a los demás en el sentido de que cualquier controller de events registrado después de que se haya disparado el evento tendrá su function de callback llamada de inmediato.

Lo que esto significa es que no 'perderás' el evento si agregas un oyente después de que se disparó el evento.

Por lo tanto, primero mueva todo el código de initialization a la function onDeviceReady. Luego, primero maneje el documento. Listo. Dentro del documento. Si determina que se está ejecutando en un browser, simplemente llame a la function onDeviceReady, de lo contrario agregue el oyente listo para el dispositivo. De esta manera, cuando esté en la function onDeviceReady, está seguro de que se han completado todos los 'listos' necesarios.

 $(document).ready(function() { // are we running in native app or in a browser? window.isphone = false; if(document.URL.indexOf("http://") === -1 && document.URL.indexOf("https://") === -1) { window.isphone = true; } if( window.isphone ) { document.addEventListener("deviceready", onDeviceReady, false); } else { onDeviceReady(); } }); function onDeviceReady() { // do everything here. } 

La verificación de teléfono funciona porque en phonegap, index.html se carga usando un file:/// url.

Ellos no son los mismos.

jQuery.ready () está usando:

 document.addEventListener("DOMContentLoaded", yourCallbackFunction, false); 

Fuente: https://code.jquery.com/jquery-3.1.1.js

Cordova / PhoneGap le indica que use:

 document.addEventListener("deviceready", yourCallbackFunction, false); 

Fuente: https://cordova.apache.org/docs/en/latest/cordova/events/events.html

Mi sugerencia es que coloque todo el código de initialization para sus complementos Cordova / PhoneGap dentro de la function de callback que se deviceready cuando se produce el evento deviceready . Ejemplo:

 document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { // Now safe to use device APIs } 

La respuesta de @Kinjal realmente me ayudó a encaminarme, pero tuve que enfrentar muchos problemas con el time.

Utilizo el evento listo para dispositivos de Cordova para leer files de datos para mi aplicación, algunos packages JSON que impulsan la construcción de interfaces y se cargan por defecto dentro de la carpeta www, pero pueden downloadse de un server para actualizar la database de la aplicación.

He encontrado muchos problemas porque las estructuras de datos de la aplicación no tuvieron time suficiente para inicializarse antes de que se iniciara el routing.

Terminé con esta solución: inicialice jQuery primero, llame al controller de events de Cordova al final de la initialization de jQuery, invoque la rutina de inicio de la aplicación al final del último procesamiento en la initialization de Cordova.

Toda esta pesadilla comenzó porque necesitaba una forma de leer los files de plantilla para Hogan.js y no podía leerlos con el protocolo de file y un XHR simple.

Me gusta esto:

 $(document).ready(function () { ... // are we running in native app or in a browser? window.isphone = false; if (document.URL.indexOf('http://') === -1 && document.URL.indexOf('https://') === -1) { window.isphone = true; } if (window.isphone) { document.addEventListener('deviceready', onDeviceReady, false); } else { onDeviceReady(); } }); function onDeviceReady() { function readFromFile(fileName, cb) { // see (https://www.neontribe.co.uk/cordova-file-plugin-examples/) } ... readFromFile(cordova.file.applicationDirectory + 'www/views/tappa.html', function (data) { app.views.lastview = data; app.start(); }); } 

Estoy usando PhoneGap Build cli-6.2.0 y cuando pruebo el procedimiento que sugirió es que no hace nada dentro de la function onDeviceReady() .

¡Con versiones anteriores de PGB funciona!

  $(document).ready(function() { window.isphone = false; if (document.URL.indexOf("http://") === -1 && document.URL.indexOf("https://") === -1) { window.isphone = true } if (window.isphone) { document.addEventListener("deviceready", this.onDeviceReady, false); } else { onDeviceReady(); } }); function onDeviceReady() { alert( window.isphone ); } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>