Question

有没有人试图在head.js的帮助下或使用其他方法异步地实现jQuery Mobile的加载和附带的脚本？我现在正在尝试它，虽然它提供了巨大的性能提升，但它似乎打破了导航（特别是hashchanged事件处理）。所以我想知道是否有人可以分享他/她的经验。

更新：hashchanged事件的问题原来是由另一个组件引起的。因此，实现jQM和其他JavaScript资产的异步加载，它是安全的，并且极大地改善了JS应用程序的加载时间和性能。我使用head.js来实现这一点，你可以使用最适合你的任何东西。

Answer 1

这正是像RequireJS这样的软件包的用途。使用像RequireJS这样的模块加载器允许您异步加载多个JS文件，并定义何时加载文件的回调。

这是一个简单的例子......

而不是加载你的jQuery和/或其他JS文件，加载的唯一<script>是RequireJS脚本。

<script data-main="js/app" src="js/require.js"></script>

data-main属性告诉RequireJS在/js/app.js加载文件，其中包含您的RequireJS配置设置。以下是/js/app.js：

的示例

requirejs.config({
    "baseUrl": "js/lib",
    "paths": {
      "app": "../app",
      "jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min",
      "jqueryMobile": "//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min"
    }
});

// Load the main app module to start the app
requirejs(["app/main"]);

在这种情况下，/js/app.js主要用于配置路径。 app属性告诉RequireJS在哪里查找您的特定应用程序JS，jquery属性告诉RequireJS jQuery的Google CDN URL的路径。最后，使用requirejs()方法加载您的应用.js文件。请注意，所有路径都不在.js。

此时，RequireJS将在app寻找您的app/main.js JS。在名为/js/app/的{{1}}中创建一个文件，因此您现在拥有main.js个文件。

此文件将异步加载来自Google CDN的jQuery和jQuery Mobile文件，并包含其余的app逻辑。以下是/js/app/main.js：

的示例

/js/app/main.js

这有什么影响？让我们看看网络瀑布，看看文件是如何加载的：

上图显示了异步加载的jQuery和jQuery Mobile。

有关类似的演示，请参阅RequireJS jQuery example 。

Answer 2

在将java脚本加载到页面时使用Async属性。但这只会在现代浏览器（Html5）中支持细节请参阅此链接

http://www.w3schools.com/tags/att_script_async.asp

异步加载jQuery Mobile脚本？

2 个答案: