首頁 > web前端 > js教程 > 使用jQuery異步載入 JavaScript腳本解決方案_jquery

使用jQuery異步載入 JavaScript腳本解決方案_jquery

WBOY
發布: 2016-05-16 16:51:44
原創
1250 人瀏覽過

JavaScript 載入器在 Web 開發中是非常強大且有用的工具。目前流行的幾個載入器,像是 curljs、LABjs 和 RequireJS 使用都很廣泛。他們功能強大的,但有些情況下可以有更簡單的方案。

如果你正在使用 jQuery,有一個內建的方法可以用來載入腳本。如果你想延遲載入外掛程式或任何其他類型的腳本,都可以使用這種方法。下面跟大家介紹如何使用它。

實作方法

jQuery 內建有 getScript 方法來載入一個腳本,處理傳回的結果可以有幾種方法來實作。最基本的用法jQuery.getScript 看起來像這樣:

複製程式碼 程式碼如下:


程式碼如下:

/*
  在腳本已載入並執行後,就可以做一些處理了
*/
});

getScript 方法傳回一個jqXHR 對象,因此可以這樣使用:


複製程式碼


程式碼如下:


jQuery.getScript("/path/to/myscript.js")
.done(function() {
/* 執行成功後的處理*/
})
.fail(function() { /* 執行失敗後的處理*/ }); 使用jQuery.getScript 最常見的場景是延遲載入一個插件,並在載入後呼叫它:


複製程式碼


程式碼如下:


jQuery.getScript("jquery.cookie.js")
.done(function() { jQuery.cookie("cookie_name", "value", { expires : 7 }); });


如果你需要做更高級的事情,如加載多個腳本和不同類型的文件(文本文件,圖像,CSS 文件等),我建議你切換到一個更強大的JavaScript 載入器。如果只想延遲載入插件,而不是簡單地在每個頁面載入的情況下,getScript 是完美的!
快取問題 需要注意的是,當使用 jQuery.getScript 的時候,在腳本 URL 後面會自動被加入時間戳,讓腳本不快取。因此你需要設定讓所有的請求都快取腳本:


複製程式碼

程式碼如下:

程式碼如下: jQuery.ajaxSetup({ cache: true });

如果您不希望覆蓋所有的快取與你的AJAX 請求,最好使用jQuery.ajax 方法並把dataType設定為script,例如這樣:




複製程式碼

程式碼如下:
jQuery.ajax({jQuery. url: "jquery.cookie.js", dataType: "script", cache: true }).done(function() { jQuery.cookie("cookie_name" , "value", { expires: 7 }); }); 在載入腳本的時候需要特別注意快取問題!
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板