异步加载jQuery Mobile脚本？

问题描述：

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

更新：hashchanged事件的问题竟然是由另一个组件引起的。因此，要实现jQM和其他JavaScript资源的异步加载，这是安全的，并且极大地提高了JS应用程序的加载时间和性能。我使用head.js来完成，你可以使用最适合你的任何工具。

你有没有尝试像[是]（https://gist.github.com/1231586）的东西吗？ – neoascetic 2012-04-12 00:41:56

不，我没有。但是，最新版本的jQM确实支持Require.Js。 – 2012-04-30 14:26:32

答

将java脚本加载到页面时使用异步属性。但这将只支持现代浏览器（HTML5）详情请参阅此链接

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

我需要以特定顺序加载几个脚本。 head.js允许我控制加载顺序，而async属性不允许。 – 2012-04-30 14:27:49

对不起，我无法抵抗。请更好地了解w3schools和他们正在做的损害：http://w3fools.com/ – kodeart 2012-05-08 13:12:58

答

这正是像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 JS在app/main.js。在/js/app/中创建一个名为main.js的文件 - 因此您现在有一个/js/app/main.js文件。

该文件将异步加载来自Google CDN的jQuery和jQuery Mobile文件，并包含应用程序逻辑的其余部分。下面是/js/app/main.js一个例子：

define(["jquery", "jqueryMobile"], function($) { 
    //jQuery and jQuery Mobile have been loaded. 
    $(function() { 
     // Do stuff with jQuery and jQuery Mobile 
    }); 
});

这是否有什么影响？让我们来看看网络瀑布怎么看这些文件加载：

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

对于类似演示，请参阅RequireJS jQuery example。

答

我想你可以使用：

var script = document.createElement('script'); 
script.onload = function() { 
    alert("Script loaded and ready"); 
}; 

script.src = "http://whatever.com/the/script.js"; 
document.getElementsByTagName('head')[0].appendChild(script);

可以触发，但你想要的事件。

在这里找到它：document.createElement("script") synchronously

异步加载jQuery Mobile脚本？

相关推荐