本篇文章帶給大家的內容是關於js實作延遲載入有幾種方式? js延遲載入的六種方式介紹,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
JS延遲加載,也就是等頁面加載完成之後再加載 JavaScript 檔案。
JS延遲載入有助於提高頁面載入速度。
一般的幾個方法如下:
defer 屬性
async 屬性
動態建立DOM方式
使用jQuery的getScript方法
使用setTimeout延遲方法
讓JS最後載入
1、defer屬性
HTML 4.01 為3f1c4e4b6b16bbbd69b2ee476dc4f83a
標籤定義了defer屬性。
用途:表示腳本在執行時不會影響頁面的建構。也就是說,腳本會被延遲到整個頁面都解析完畢之後再執行。
在3f1c4e4b6b16bbbd69b2ee476dc4f83a
元素中設定 defer
屬性,等於告訴瀏覽器立即下載,但延遲執行。
<!DOCTYPE html> <html> <head> <script src="test1.js" defer="defer"></script> <script src="test2.js" defer="defer"></script> </head> <body> <!-- 这里放内容 --> </body> </html>
說明:雖然3f1c4e4b6b16bbbd69b2ee476dc4f83a
元素放在了93f0f5c25f18dab9d176bd4f6de5d30e
元素中,但包含的腳本將延遲瀏覽器遇到 73a6ac4ed44ffec12cee46588e518a5e
標籤後再執行。
HTML5規格要求腳本按照它們出現的先後順序執行。在現實當中,延遲腳本並不一定會依照順序執行。
defer屬性只適用於外部腳本檔案。支援 HTML5 的實作會忽略嵌入腳本設定的 defer屬性。
2、async屬性
#HTML5 為3f1c4e4b6b16bbbd69b2ee476dc4f83a
標籤定義了async
屬性。與defer
屬性類似,都用來改變處理腳本的行為。同樣,只適用於外部腳本檔案。
目的:不讓頁面等待腳本下載和執行,從而非同步載入頁面其他內容。
非同步腳本一定會在頁面 load 事件前執行。
不能保證腳本會依序執行。
<!DOCTYPE html> <html> <head> <script src="test1.js" async></script> <script src="test2.js" async></script> </head> <body> <!-- 这里放内容 --> </body> </html>
async和defer一樣,都不會阻塞其他資源下載,所以不會影響頁面的載入。
缺點:無法控制載入的順序
3、動態建立DOM方式
//这些代码应被放置在</body>标签前(接近HTML文件的底部) <script type="text/javascript"> function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "defer.js"; document.body.appendChild(element); } if(window.addEventListener) window.addEventListener("load",downloadJSAtOnload,false); else if(window.attachEvent) window.attachEvent("onload",downloadJAAtOnload); else window.onload = downloadJSAtload;</script>
4.使用jQuery的getScript ()方法
$.getScript("outer.js",function(){ //回调函数,成功获取文件后执行的函数 console.log("脚本加载完成") });
5.使用setTimeout延遲方法
6.讓JS最後載入
##相關推薦:JavaScript圖像延遲載入庫Echo.js_javascript技巧
以上是js實作延遲載入有幾種方式? js延遲載入的六種方式介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!