优化jQueryMobile的代码:仅在需要时选择性地包含外部JS文件的问题

tat*_*lar 5 ajax jquery google-maps-api-3 google-maps-markers jquery-mobile

我正在使用jQueryMobile作为移动应用程序.显然我希望UI能够非常快速地加载,但是应用程序有多个工具,因此我只想在导航到的时候为"页面"加载相关的外部JS库.对于主应用程序(90%的页面),我只想要jQueryMobile核心文件(即来自Google AJAX库和jQueryMobile JS&CSS的最新jquery核心).但是,对于剩余的10%,我需要启用地理位置的Google Maps v3(因此Google Gears外部库)和MarkerClusterer库(我有400个标记,我只想在必要时绘制).

据我了解jQueryMobile是如何工作的(所有这些都是通过内部AJAX请求),您必须在应用程序初始化时加载整个应用程序的所有库.这使得我的应用程序在用户第一次请求移动站点时非常繁重(所有核心文件,以及所有map/gelocation/marker集群文件).我想避免这种情况发生,因为它会吓跑许多潜在用户(特别是只有我的用户的一部分需要地理定位的好处).

我尝试在相关页面的末尾(在页脚div之前)加载Google Maps组件,并尝试将它们放入相关页面的<head>标记中.但是这两个都无法初始化(使用附加到函数的console.log()输出进行检查).

是的,在你问之前,我正在使用"pagecreate"live()函数并且正在寻找正确的div(如果我将与谷歌地图相关的所有内容放入根页头标记中,一切正常就可以了)

我觉得这一定是一个非常常见的问题:使用jQueryMobile选择性加载页面组件.我在网上找不到任何东西 - 大多数jQueryMobile教程都是常见的花园'Hello World!' 多种多样,所以如果你有什么可以提供我的全部耳朵!有选择性加载教程的链接也欢迎!

提前致谢!

nau*_*tur 3

所有这些页面都会初始化每个页面上所有必需的库。

是的,这是执行此操作的默认方式,因此无论用户首先调用哪个页面/子页面 - 一切正常。所有库都工作正常并且只加载一次。但你可能知道。

假设您想稍后加载一些库,以便即使用户不需要它们,它们也不会减慢整个应用程序的速度,您应该强制它们仅加载正确的页面。

这可以通过一些不同的方式来实现:

  1. 最简单的:将其放在头部,就好像它是第一个打开的页面一样,然后放入rel="external"该子页面的所有链接。显然,它会重新加载页面,并使您失去 JQM 缓存页面的一些优势,但及时加载库可能是值得的
  2. 建议:JQM 应该在将 JS 放入pagediv 内时加载并运行 JS。它无法为您工作的原因可能是该库依赖于一个domready事件,并且您可能必须为该库触发它。但如果你只是触发事件,它会让所有东西(包括 JQM)处理它。您必须使其仅触发库。为此,您需要:
    • 编辑代码,找到事件处理函数
    • 更改代码,以便该函数具有全局可访问的名称
    • pagesomething在处理程序中调用该函数

另外:如果您遇到页面问题,请尝试绑定到 apageshow而不是,pagecreate看看是否有某些内容需要元素首先可见。