首頁 > web前端 > js教程 > jquery引入外部CDN 載入失敗則引入本地jq庫的方法

jquery引入外部CDN 載入失敗則引入本地jq庫的方法

不言
發布: 2018-07-04 10:54:54
原創
3709 人瀏覽過

這篇文章主要介紹了網站加載第三方CDN,如果jQuery庫不成功則加載本地的jquery的實現代碼,需要的朋友可以參考下

由於第三方cdn庫的盛行,很多朋友會選擇使用第三方的類別庫,從學習上來說不建議大家都使用類別庫,這樣我們失去了很多學習的機會,但使用上來說解決了很多程式碼相容問題,這裡都不多說了。

使用CDN載入jQuery類別函式庫一是可以省一點頻寬,二是可以帶給使用者更快的頁面載入體驗。

因為個人網站規模與cdn的頻寬問題,現在cdn費用雖然下來了,但也有不給力的時候,很多朋友都會選擇使用第三方的jquery庫,個人推薦幾個國內的百度、新浪、bootcdn

下面的兩段程式碼的作用如果cdn的jquery沒有載入進來,我們可以使用本地的類別庫。

jquery下載地址

第一種:推薦用法

#
<script src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
 if (typeof jQuery == &#39;undefined&#39;) {
 document.write(unescape("%3Cscript src=&#39;/skin/mobile/js/jquery.min.js&#39; type=&#39;text/javascript&#39;%3E%3C/script%3E"));
 }
</script>
登入後複製

上面,我們引用了百度CDN的jQuery函式庫,接著我們在腳本程式碼後面加入了一個if語句來判斷jQuery函式庫是否載入成功,如果沒有載入成功我們動態載入本機jQuery函式庫。

其中,我們在document.write方法中直接使用了URL編碼,把“<”編碼為“<”,接著我們再使用unescape()方法把字串還原過來。

我們透過unescape()方法把字串轉換回來,我們可以看到輸出是一個正常的腳本引用程式碼。

現在,我們有一個疑問就是“為什麼不使用常規字符,而是要使用字符編碼呢?”,其實這是有原因的,這意味著我們代碼將可以在XML、XHTML或HTML中正常運行,而無需把程式碼包含在CDATA中(具體請參考這裡)。

第二種:

<script src="http://lib.sinaapp.com/js/jquery11/1.8/jquery.min.js"></script>
<script>window.jQuery || document.write(unescape("%3Cscript src=&#39;/skin/mobile/js/jquery.min.js&#39; type=&#39;text/javascript&#39;%3E%3C/script%3E"))</script>
登入後複製

#上面這種跟第一種原理是一樣的,就是透過| | 運算子

表達式a || 表達式b : 計算表達式a(也可以是函數)的運算結果,

如果為Fasle, 執行表達式b(或函數) ,並傳回b的結果;

如果為True,傳回a的結果;

意思也是如果window.jQuery為false則載入本機的jquery函式庫。

requireJs 引用cdn失敗後載入本地js

問題:頁面中引用js與css太多會導致頁面載入變慢

           中的js和css會比直接在本地上傳時間短

解決方法:我本地專案用到requireJs載入頁面中的js和css,變成cdn載入時需要改動如下

# 1.jquery: ["https://cdn.bootcssddd.com/jquery/1.11.1/jquery.min","static/lib/jquery/jquery-1.9.1.min"],
2.增加build.js 程式碼如下

({
  baseUrl: "/js",
  paths: {
    "jquery": "empty:"
    
  },
  dir: "/js-build",
  optimize: "uglify",
  optimizeCss: "standard.keepLines",
  mainConfigFile: "config.js",//config.js为1中引用的文件
  removeCombined: true,
})
登入後複製

以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關推薦:

jquery.onoff實作的開關按鈕功能

關於jQuery實作表單動態新增與刪除數據的操作

#

以上是jquery引入外部CDN 載入失敗則引入本地jq庫的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板