異步加載jQuery Mobile腳本？

有沒有人試圖通過head.js的幫助或使用其他方法異步執行伴隨腳本加載jQuery Mobile？我現在正在試驗它，雖然它提供了巨大的性能提升，但似乎打破了導航（特別是hashchanged事件處理）。所以我想知道是否有人可以分享他/她的經驗。異步加載jQuery Mobile腳本？

更新：hashchanged事件的問題竟然是由另一個組件引起的。因此，要實現jQM和其他JavaScript資源的異步加載，這是安全的，並且極大地提高了JS應用程序的加載時間和性能。我使用head.js來完成，你可以使用最適合你的任何工具。

來源

2012-03-14 Alex Avrutin

你有沒有嘗試像[是]（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

來源

2012-04-30 09:56:51 Humayoo

我需要以特定順序加載幾個腳本。 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。

來源

2016-02-02 07:18:25

我想你可以使用：

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

來源

2016-09-30 04:22:58

異步加載jQuery Mobile腳本？

回答

相關問題