一般有以下幾種方式:
網(wǎng)站建設(shè)哪家好,找創(chuàng)新互聯(lián)!專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、重慶小程序開(kāi)發(fā)公司、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了津南免費(fèi)建站歡迎大家使用!
defer 屬性
HTML 4.01 為 script標(biāo)簽定義了 defer屬性。
用途:表明腳本在執(zhí)行時(shí)不會(huì)影響頁(yè)面的構(gòu)造。也就是說(shuō),腳本會(huì)被延遲到整個(gè)頁(yè)面都解析完畢之后再執(zhí)行。
在script 元素中設(shè)置 defer 屬性,等于告訴瀏覽器立即下載,但延遲執(zhí)行。
!DOCTYPE?htmlhtmlheadscript?src="test1.js"?defer="defer"/scriptscript?src="test2.js"?defer="defer"/script/headbody?!--?這里放內(nèi)容?--?/body/html? ?
說(shuō)明:雖然script 元素放在了head元素中,但包含的腳本將延遲瀏覽器遇到/html標(biāo)簽后再執(zhí)行。
HTML5規(guī)范要求腳本按照它們出現(xiàn)的先后順序執(zhí)行。在現(xiàn)實(shí)當(dāng)中,延遲腳本并不一定會(huì)按照順序執(zhí)行。
defer屬性只適用于外部腳本文件。支持 HTML5 的實(shí)現(xiàn)會(huì)忽略嵌入腳本設(shè)置的 defer屬性。
2. async 屬性
HTML5 為 script標(biāo)簽定義了 async屬性。與defer屬性類似,都用于改變處理腳本的行為。同樣,只適用于外部腳本文件。
目的:不讓頁(yè)面等待腳本下載和執(zhí)行,從而異步加載頁(yè)面其他內(nèi)容。
異步腳本一定會(huì)在頁(yè)面 load 事件前執(zhí)行。
不能保證腳本會(huì)按順序執(zhí)行。
!DOCTYPE?htmlhtmlhead?script?src="test1.js"?async/scriptscript?src="test2.js"?async/script?/headbody?!--?這里放內(nèi)容?--?/body/html? ?
4.使用jQuery的getScript()方法
$.getScript("outer.js",function(){//回調(diào)函數(shù),成功獲取文件后執(zhí)行的函數(shù)??
console.log("腳本加載完成")??
});
5.使用setTimeout延遲方法
6.讓JS最后加載
把js外部引入的文件放到頁(yè)面底部,來(lái)讓js最后引入,從而加快頁(yè)面加載速度
by三人行慕課
javascript提供了setTimeout() 方法用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式,因此延遲1秒后執(zhí)行一個(gè)函數(shù)可以如下代碼實(shí)現(xiàn):
setTimeout("fun()",1000);???//?fun()是自定義函數(shù)
下面實(shí)例演示:打開(kāi)頁(yè)面后倒計(jì)時(shí)3秒,然后彈出對(duì)話框
1、HTML結(jié)構(gòu)
div?id="test"3/div
2、javascript代碼
function?fun(n){
if(n0){
n--;
document.getElementById("test").innerHTML?=?n;
setTimeout("fun("+n+")",1000)
}
else
alert("時(shí)間到??!");
}
window.onload?=?function(){
setTimeout("fun(3)",1000)
}
3、效果演示
二、JavaScript 的計(jì)時(shí)事件的函數(shù)
setTimeout() - 在指定時(shí)間后執(zhí)行代碼
clearTimeout() - 取消 setTimeout()注意:setTimeout() 和 clearTimeout() 都是HTML DOM 的 Window 對(duì)象的函數(shù)。
三、setTimeout詳解
var t=setTimeout("javascript 語(yǔ)句",時(shí)間參數(shù))
注:時(shí)間參數(shù)單位為毫秒
示例:var t=setTimeout("alert('3 seconds!')",3000)
如果js語(yǔ)句帶變量,則必須用+號(hào)將變量連接起來(lái),如:
var t=setTimeout("document.getElementById("+menuid+").style.display='none'",3000)
四、clearTimeout詳解
語(yǔ)法:clearTimeout(setTimeout的變量名)
示例:clearTimeout(t) //其中t為前面設(shè)置的setTimeout的變量
使用clearTimeout可以隨時(shí)停止計(jì)時(shí)。
五、應(yīng)用技巧
建議將setTimeout單獨(dú)設(shè)置為一個(gè)函數(shù)。如:
function delayRun(code,time) {
var t=setTimeout(code,time);}這樣,在需要讓某段代碼延時(shí)執(zhí)行的時(shí)候,只需在這段代碼前加入這個(gè)函數(shù)就可以了。如:
onmouseover=delayRun("setTab(0,0)",500)
其中setTab是一個(gè)自定義的函數(shù)。如果以后不想讓setTab延時(shí)執(zhí)行,則去掉語(yǔ)句中的delayRun相關(guān)的代碼即可,改為:onmouseover=setTab(0,0) 就可以了。
這種寫(xiě)法避免每一個(gè)需要延時(shí)的地方都寫(xiě)一段setTimeout的代碼,只需要直接調(diào)用就可以了,很方便。也節(jié)省了代碼的量。
我們先來(lái)看一個(gè)例子
在JS方法里面設(shè)置一個(gè)for循環(huán),輸出每次循環(huán)的值,如下圖
我們可以根據(jù)閉包的知識(shí)來(lái)更改一下for循環(huán)中的邏輯,利用閉包將i的值傳遞給a
這次在運(yùn)行程序我們就可以看到輸出內(nèi)容是0開(kāi)始輸出了
結(jié)果如下圖
JS中如果for循環(huán)中有異步方法,就需要用閉包的方式保留當(dāng)前循環(huán)變量值
js延時(shí)5秒用find寫(xiě)法setTimeout(function(){ getSignature() },5000);
在前端開(kāi)發(fā)過(guò)程中,如果使用傳統(tǒng)的純js,有時(shí)會(huì)有延時(shí)執(zhí)行一個(gè)方法的需求.
使用js實(shí)現(xiàn)幾秒以后倒計(jì)時(shí)跳轉(zhuǎn),這個(gè)在某些特殊情況下還是比較實(shí)用的。
J s延遲加載的方式有哪些?
給javascript標(biāo)簽添加 defer和async屬性。
defer和async的區(qū)別是什么?
1、defer和async都是使script異步加載的意思,當(dāng)都沒(méi)有設(shè)置這個(gè)屬性的時(shí)候,html的加載會(huì)被阻塞等著script加載完成和執(zhí)行完成后再渲染頁(yè)面。
2、當(dāng)設(shè)置了async時(shí),異步加載,一旦加載完成則阻塞html渲染,進(jìn)行執(zhí)行,而且如果有多個(gè)script標(biāo)簽則誰(shuí)先加載完,誰(shuí)先執(zhí)行。
3、當(dāng)設(shè)置了defer時(shí),異步加載,不會(huì)阻塞html,待html渲染完畢后再進(jìn)行script執(zhí)行。
注意:ie只支持defer