Optimización del código para jQueryMobile: problemas para incluir selectivamente archivos JS externos solo cuando son necesarios

Question

Estoy usando jQueryMobile para una aplicación móvil. Obviamente, quiero que la IU se cargue muy rápido, pero la aplicación tiene más de una herramienta, por lo que solo quiero cargar las bibliotecas JS externas relevantes para las 'páginas' cuando se naveguen a ellas. Para la aplicación principal (90% de las páginas) solo quiero los archivos centrales de jQueryMobile (es decir, el último núcleo de jquery de las bibliotecas de Google AJAX y el jQueryMobile JS & CSS). Sin embargo, para el 10% restante necesito Google Maps v3 con geolocalización habilitada (por lo que la biblioteca externa de Google Gears) y la biblioteca MarkerClusterer (tengo> 400 marcadores que quiero trazar solo si es necesario).

Como entiendo cómo funciona jQueryMobile (todo a través de solicitudes internas de AJAX), tiene tiene todas las bibliotecas para toda la carga de la aplicación cuando la aplicación se inicializa. Esto hace que mi aplicación sea realmente pesada cuando el usuario solicita por primera vez el sitio móvil (todos los archivos principales, además de todos los mapas/gelocation/marker cluster files). Quiero evitar que eso suceda, ya que asustará a muchos posibles usuarios (especialmente cuando solo un subconjunto de mis usuarios quiere la geolocalización).

He intentado cargar solo los componentes de Google Maps al final de la página relevante (antes del pie de página div) y también intenté ponerlos en la etiqueta de la <cabeza> en la página correspondiente. Sin embargo, ambos no se inicializan (se comprueba con la salida console.log() adjunta a las funciones).

Y sí, antes de preguntar, estoy usando la función "pagecreate" live() y me estoy dirigiendo al div correcto (si pongo todo lo relacionado con Google Maps en la página principal, todo funciona bien como debería))

Creo que esta debe ser una pregunta bastante común: carga selectiva de componentes de página con jQueryMobile. No pude encontrar nada en línea a través de Google: la mayoría de los tutoriales de jQueryMobile son el jardín común "¡Hola, mundo!" variedad, así que si tienes algo que ofrecer, ¡soy todo oídos! Enlaces a tutoriales de carga selectiva también bienvenidos!

¡Gracias de antemano!

Answer 1

todas esas páginas inicializan todas las bibliotecas necesarias en cada página.

Sí, esa es la manera predeterminada de hacerlo, por lo que cualquier página/subpágina es llamada primero por el usuario; todo funciona. Todas las bibliotecas funcionan bien y se cargan solo una vez. Pero eso es probable que lo sepas.

Suponiendo que desea cargar algunas bibliotecas más tarde, para que no ralenticen toda la aplicación incluso cuando el usuario no las necesite, debe obligarlas a cargar solo con la página correcta.

Esto se puede lograr de alguna manera diferentes:

1. La forma más fácil: ponerlo en la cabeza, Asif era la página forst para ser abierto y puso rel="external" en todos los enlaces a esa subpágina. Obviamente, volverá a cargar la página y le hará perder algunas ventajas de las páginas de caché JQM, pero cargar las bibliotecas a tiempo podría valer la pena
2. Aviso: JQM debe cargar y ejecutar JS cuando se coloca dentro del div page. La razón por la cual no funcionó para usted es probablemente que la lib dependa de un evento domready y deba desencadenarlo para la biblioteca. Pero si activa el evento, hará que todo (incluido JQM) lo maneje. Tienes que hacer que active solo la biblioteca.Para ello es necesario:
   • editar el código y hallar la función de control de eventos
   • cambio el código para que la función tiene un nombre globalmente accesible
   • llamada de la función en un controlador pagesomething

También: si tiene problemas con las páginas, intente vincularlo a pageshow en lugar de pagecreate para ver si algo requiere que los elementos estén visibles primero.

Answer 2

¡Buena pregunta! No he visto esto en los documentos jQuery Mobile. Siguiendo naugtur que diría algo como esto dentro de su página div

<script> 
if(typeof MyFunction == "undefined") { 
    $.getScript('myfunction.js', function() { 
     // initialize if necessary 
    }); 
} 
</script> 

Si va a cargar cosas, que Google sirve, sobre todo si hay varios archivos, el jsload es una buena opción.

Answer 3

pregunta, ¿intentó usar el enfoque head.js para el problema? configuran archivos js para cargarlos como solicitud desbloqueada como la forma en que se cargan las imágenes en los navegadores en lugar del navegador predeterminado cargando un archivo js a la vez y bloqueando otras cargas js