js實(shí)現(xiàn)延遲加載的幾種方法
js的延遲加載有助與提高頁(yè)面的加載速度，以下是延遲加載的幾種方法：
1.使用setTimeout延遲方法的加載時(shí)間
延遲加載js代碼，給網(wǎng)頁(yè)加載留出更多時(shí)間
<script type="text/javascript" >
function A(){
$.post("/lord/login",{name:username,pwd:password},function(){
alert("Hello");
});
}
$(function (){
setTimeout('A()', 1000); //延遲1秒
})
</script>
2.讓js最后加載
例如引入外部js腳本文件時(shí)，如果放入html的head中,則頁(yè)面加載前該js腳本就會(huì)被加載入頁(yè)面，而放入body中，則會(huì)按照頁(yè)面從上倒下的加載順序來(lái)運(yùn)行JavaScript的代碼~~~ 所以我們可以把js外部引入的文件放到頁(yè)面底部，來(lái)讓js最后引入，從而加快頁(yè)面加載速度
3.上述方法2也會(huì)偶爾讓你收到Google頁(yè)面速度測(cè)試工具的“延遲加載javascript”警告。所以這里的解決方案將是來(lái)自Google幫助頁(yè)面的推薦方案。
//這些代碼應(yīng)被放置在</body>標(biāo)簽前(接近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", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
這段代碼意思是等到整個(gè)文檔加載完后，再加載外部文件“defer.js”。
使用此段代碼的步驟：
1）.復(fù)制上面代碼
2）.粘貼代碼到HTML的標(biāo)簽前 (靠近HTML文件底部)
3）.修改“defer.js”為你的外部JS文件名
4）.確保你文件路徑是正確的。例如：如果你僅輸入“defer.js”，那么“defer.js”文件一定與HTML文件在同一文件夾下。
注意：這段代碼直到文檔加載完才會(huì)加載指定的外部js文件。因此，不應(yīng)該把那些頁(yè)面正常加載需要依賴的javascript代碼放在這里。而應(yīng)該將JavaScript代碼分成兩組。一組是因頁(yè)面需要而立即加載的javascript代碼，另外一組是在頁(yè)面加載后進(jìn)行操作的javascript代碼(例如添加click事件或其他東西)。這些需等到頁(yè)面加載后再執(zhí)行的JavaScript代碼，應(yīng)放在一個(gè)外部文件，然后再引進(jìn)來(lái)。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了tab欄切換的原理以及實(shí)現(xiàn)方法代碼。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
JavaScript中的console.time()函數(shù)詳細(xì)介紹
這篇文章主要介紹了JavaScript中的console.time()函數(shù)詳細(xì)介紹,console.time()函數(shù)主要用來(lái)統(tǒng)計(jì)程序執(zhí)行時(shí)間,需要的朋友可以參考下2014-12-12
js中字符型和數(shù)值型數(shù)字的互相轉(zhuǎn)化方法(必看)
下面小編就為大家?guī)?lái)一篇js中字符型和數(shù)值型數(shù)字的互相轉(zhuǎn)化方法(必看)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
原生JavaScript實(shí)現(xiàn)的簡(jiǎn)單省市縣三級(jí)聯(lián)動(dòng)功能示例
這篇文章主要介紹了原生JavaScript實(shí)現(xiàn)的簡(jiǎn)單省市縣三級(jí)聯(lián)動(dòng)功能,結(jié)合完整實(shí)例形式分析了javascript聯(lián)動(dòng)菜單的實(shí)現(xiàn)方法,涉及javascript事件響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-05-05
html+css+js實(shí)現(xiàn)canvas跟隨鼠標(biāo)的小圓特效源碼
這篇文章主要介紹了html+css+js實(shí)現(xiàn)canvas跟隨鼠標(biāo)的小圓特效源碼,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-03-03
js實(shí)現(xiàn)發(fā)送驗(yàn)證碼后的倒計(jì)時(shí)功能
本文解決方案的基本思路是點(diǎn)擊就將按鈕設(shè)為disabled,然后根據(jù)cookie判斷是否設(shè)置過(guò)期時(shí)間,將手機(jī)利用ajax提交到后臺(tái)的發(fā)短信接口，就可以了2015-05-05
僅IE9/10同時(shí)支持script元素的onload和onreadystatechange事件分析
測(cè)試結(jié)果可以看出，IE9后已經(jīng)開始支持script的onload事件了。一直以來(lái)我們判斷js文件是否已經(jīng)加載完成就是用以上的兩個(gè)事件。2011-04-04
JS實(shí)現(xiàn)在網(wǎng)頁(yè)中彈出一個(gè)輸入框的方法
這篇文章主要介紹了JS實(shí)現(xiàn)在網(wǎng)頁(yè)中彈出一個(gè)輸入框的方法,實(shí)例分析了prompt的用法,可用來(lái)設(shè)置密碼,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
JavaScript中調(diào)用函數(shù)的4種方式代碼實(shí)例
這篇文章主要介紹了JavaScript中調(diào)用函數(shù)的4種方式代碼實(shí)例,本文分別給出方法調(diào)用模式、函數(shù)調(diào)用模式、構(gòu)造器調(diào)用模式、apply調(diào)用模式4種方式的代碼實(shí)例,需要的朋友可以參考下2015-07-07
JS 類型轉(zhuǎn)換常見方法小結(jié)，需要的朋友可以參考下。2010-05-05