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

前端之家收集整理的这篇文章主要介绍了优化jQueryMobile的代码:仅在需要时选择性地包含外部JS文件的问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我正在使用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!’多种多样,所以如果你有什么可以提供我的全部耳朵!有选择性加载教程的链接也欢迎!

提前致谢!

最佳答案

all those pages initialize all the required libraries on every page.

是的,这是默认的方式,所以无论用户首先调用哪个页面/子页面 – 一切正常.所有库工作正常,只加载一次.但你可能知道.

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

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

>最简单的方法:把它放在头部,如果要打开forst页面并在所有链接到该子页面的地方放置rel =“external”.它显然会重新加载页面并让你失去JQM缓存页面的一些优点,但是及时加载库可能是值得的
>建议:当JQM放入页面div时,它应该加载并运行JS.它无法为您工作的原因可能是lib依赖于domready事件而您可能必须为库触发它.但是如果你只是触发事件,它将使一切(包括JQM)处理它.你必须让它只触发库.要做到这一点,你需要:

>编辑代码并找到事件处理函数
>更改代码,以便该函数具有全局可访问的名称
>在pagesomething处理程序中调用函数

另外:如果您遇到页面问题,请尝试绑定到pageshow而不是pagecreate,以查看某些内容是否需要首先显示元素.

猜你在找的jQuery相关文章