理解Javascript檔案動態載入_javascript技巧
Javascript檔案動態載入一直是比較困擾的一件事情,像網路上傳的比較常見的做法:
function loadjs(fileurl){
var sct = document.createElement("script");
sct.src = fileurl;
document.head.appendChild(sct);
}
然後我們來檢驗一下結果:
<html>
<head>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" media="screen" />
</head>
<body>
<script>
function loadjs(fileurl){
var sct = document.createElement("script");
sct.src = fileurl;
document.head.appendChild(sct);
}
loadjs("http://code.jquery.com/jquery-1.12.0.js");
loadjs("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js")
loadjs("http://bootboxjs.com/bootbox.js")
</script>
</body>
</html>
程式碼載入完後,會出現下圖的錯誤：
jquery明明是載入在第一個處理,為什麼還是報jQuery不存在的物件呢?
因為這樣加載，相當於開啟了三個線程,只是jquery這個文件先啟動線程,而jquery執行完這個線程的時間,超過了後面兩個時間. 因此後面執行完的,可能沒能找到jquery這個對象。
然這種方式怎麼處理呢?
其實檔案的載入是有個狀態處理的.檔案的載入有個onload事件,就是可以監聽檔案是否載入完成的事件.
因此我們可以考慮這個方法來處理我們想要的結果.我們用直觀的方式來處理.改進後的程式碼如下：
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" media="screen" />
</head>
<body>
<script>
function loadjs(fileurl, fn){
var sct = document.createElement("script");
sct.src = fileurl;
if(fn){
sct.onload = fn;
}
document.head.appendChild(sct);
}
loadjs("http://code.jquery.com/jquery-1.12.0.js",function(){
loadjs("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js",function(){
loadjs("http://bootboxjs.com/bootbox.js")
})
});
</script>
</body>
</html>
OK,執行完這個程式碼之後,載入檔都是在前一個載入完成後,才會載入另外一個,這樣就不會造成找不到用到的物件了.
然後我們來執行一個彈出框的效果,程式碼裡面使用了 Bootbox.js 外掛程式. 載入程式碼如下:
loadjs("http://code.jquery.com/jquery-1.12.0.js",function(){
loadjs("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js",function(){
loadjs("http://bootboxjs.com/bootbox.js",function(){
bootbox.alert("Hello world!", function() {
Example.show("Hello world callback");
});
})
})
});
刷新頁面,就會直接顯示彈出框：
動態加載的程式碼,往往容易在這裡花很多時間調試.大家最好的辦法就是寫一個最簡單的例子,理解其中的原因. 這裡的程式碼都可以進行封裝,還可以加入CSS檔案的加載.作為自己的插件使用。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
在JavaScript中替換字符串字符
Mar 11, 2025 am 12:07 AM
JavaScript字符串替換方法詳解及常見問題解答 本文將探討兩種在JavaScript中替換字符串字符的方法：在JavaScript代碼內部替換和在網頁HTML內部替換。 在JavaScript代碼內部替換字符串 最直接的方法是使用replace()方法： str = str.replace("find","replace"); 該方法僅替換第一個匹配項。要替換所有匹配項，需使用正則表達式並添加全局標誌g： str = str.replace(/fi
如何在瀏覽器中優化JavaScript代碼以進行性能？
Mar 18, 2025 pm 03:14 PM
本文討論了在瀏覽器中優化JavaScript性能的策略，重點是減少執行時間並最大程度地減少對頁面負載速度的影響。
如何使用瀏覽器開發人員工具有效調試JavaScript代碼？
Mar 18, 2025 pm 03:16 PM
本文討論了使用瀏覽器開發人員工具的有效JavaScript調試，專注於設置斷點，使用控制台和分析性能。
立即提高jQuery性能的10種方法
Mar 11, 2025 am 12:15 AM
本文概述了十個簡單的步驟，可以顯著提高腳本的性能。 這些技術很簡單，適用於所有技能水平。 保持更新：使用bundler（例如vite）的npm等軟件包經理來確保
使用Passport與semelize和MySQL
Mar 11, 2025 am 11:04 AM
續集是一個基於承諾的node.js orm。它可以與PostgreSQL，MySQL，MariadB，Sqlite和MSSQL一起使用。在本教程中，我們將為Web應用程序的用戶實施身份驗證。我們將使用Passport，Passport，Midderw的流行身份驗證
如何構建簡單的jQuery滑塊
Mar 11, 2025 am 12:19 AM
本文將引導您使用jQuery庫創建一個簡單的圖片輪播。我們將使用bxSlider庫，它基於jQuery構建，並提供許多配置選項來設置輪播。 如今，圖片輪播已成為網站必備功能——一圖胜千言！ 決定使用圖片輪播後，下一個問題是如何創建它。首先，您需要收集高質量、高分辨率的圖片。 接下來，您需要使用HTML和一些JavaScript代碼來創建圖片輪播。網絡上有很多庫可以幫助您以不同的方式創建輪播。我們將使用開源的bxSlider庫。 bxSlider庫支持響應式設計，因此使用此庫構建的輪播可以適應任何
