原生JS實現(xiàn)DOM加載完成馬上執(zhí)行JS代碼的方法
用原生JS我們經(jīng)常使用window.onload事件來加載頁面。但是window.onload是在頁面元素都加載完畢后才執(zhí)行,如果頁面內(nèi)有大的圖片的話,會在頁面展現(xiàn)后好久時間后才執(zhí)行。所以有時我們需要在DOM載入時馬上執(zhí)行一些函數(shù)。jQuery提供了document.ready方法用來代替window.onload。但又不愿意僅為了這一個需求而引入整個JQuery庫,于是就把jQuery的方法提取出來,單獨使用了。
如果只需要對DOM進(jìn)行操作,那么這時就沒必要等到頁面全部加載了。Firefox有DOMContentLoaded事件可以輕松解決,可惜的就是IE沒有。
MSDN關(guān)于JSCRIPT的一個方法有段不起眼的話,當(dāng)頁面DOM未加載完成時,調(diào)用doScroll方法時,會產(chǎn)生異常。那么我們反過來用,如果不異常,那么就是頁面DOM加載完畢了。所以 對于Mozilla & Opera 瀏覽器,在dom樹載入后有現(xiàn)成的 DOMContentLoaded 事件。對于Safari 瀏覽器,有document.onreadystatechange事件,當(dāng)該觸發(fā)時,如果 document.readyState=complete時,可視為dom樹已經(jīng)載入。
對于ie,當(dāng)在iframe內(nèi)時,同樣有document.onreadystatechange事件,對于ie在非iframe內(nèi)時,只有不斷地通過能否執(zhí)行doScroll判斷dom是否加載完畢。
在本例中每間隔5毫秒嘗試去執(zhí)行 document.documentElement.doScroll(‘left')。在ie8下,貌視非iframe窗口也會有 document.onreadystatechange事件,另外也可以在構(gòu)建自己的框架時使用此函數(shù)。
(function(){
var isReady=false; //判斷onDOMReady方法是否已經(jīng)被執(zhí)行過
var readyList= [];//把需要執(zhí)行的方法先暫存在這個數(shù)組里
var timer;//定時器句柄
ready=function(fn)
{
if (isReady )
fn.call( document);
else
readyList.push( function() { return fn.call(this);});
return this;
}
var onDOMReady=function(){
for(var i=0;i< readyList.length;i++)
{
readyList[i].apply(document);
}
readyList = null;
}
var bindReady = function(evt)
{
if(isReady) return;
isReady=true;
onDOMReady.call(window);
if(document.removeEventListener)
{
document.removeEventListener("DOMContentLoaded", bindReady, false);
}
else if(document.attachEvent)
{
document.detachEvent("onreadystatechange", bindReady);
if(window == window.top){
clearInterval(timer);//事件發(fā)生后清除定時器
timer = null;
}
}
};
if(document.addEventListener){
document.addEventListener("DOMContentLoaded", bindReady, false);
}
else if(document.attachEvent)//非最頂級父窗口
{
document.attachEvent("onreadystatechange", function(){
if((/loaded|complete/).test(document.readyState))
bindReady();
});
if(window == window.top)//在應(yīng)用有frameset或者iframe的頁面時,parent是父窗口,top是最頂級父窗口(有的窗口中套了好幾層frameset或者iframe)
{
timer = setInterval(function(){
try
{
isReady||document.documentElement.doScroll('left');//在IE下用能否執(zhí)行doScroll判斷 dom是否加載完畢
}
catch(e)
{
return;
}
bindReady();
},5);
}
}
})();
下面是使用方法:
ready(dosomething);//dosomething為已存在的函數(shù)
//也可以通過閉包來使用
ready(function(){
//這里是邏輯代碼
});
以上這篇原生JS實現(xiàn)DOM加載完成馬上執(zhí)行JS代碼的方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
- JS中DOM元素的attribute與property屬性示例詳解
- JavaScript實現(xiàn)的DOM繪制柱狀圖效果示例
- JS實現(xiàn)同一DOM元素上onClick事件與onDblClick事件并存的解決方法
- JS常見DOM節(jié)點操作示例【創(chuàng)建 ,插入,刪除,復(fù)制,查找】
- JavaScript DOM元素常見操作詳解【添加、刪除、修改等】
- JavaScript實現(xiàn)的DOM樹遍歷方法詳解【二叉DOM樹、多叉DOM樹】
- 學(xué)習(xí)JS中的DOM節(jié)點以及操作
- JS中獲取 DOM 元素的絕對位置實例詳解
- JS實現(xiàn)DOM刪除節(jié)點操作示例
- JS實現(xiàn)的DOM插入節(jié)點操作示例
- JS遍歷DOM文檔樹的方法實例詳解
- js中DOM事件綁定分析
- 在js代碼拼接dom對象到頁面上的模板總結(jié)
相關(guān)文章
微信小程序 調(diào)用微信授權(quán)窗口相關(guān)問題解決
這篇文章主要介紹了微信小程序 調(diào)用微信授權(quán)窗口相關(guān)問題解決,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07
js實現(xiàn)網(wǎng)頁隨機(jī)切換背景圖片的方法
這篇文章主要介紹了js實現(xiàn)網(wǎng)頁隨機(jī)切換背景圖片的方法,涉及數(shù)組、隨機(jī)函數(shù)與css樣式的調(diào)用技巧,非常具有實用價值,需要的朋友可以參考下2014-11-11
js prototype 格式化數(shù)字 By shawl.qiu
js prototype 格式化數(shù)字 By shawl.qiu...2007-04-04
微信小程序云開發(fā)如何實現(xiàn)數(shù)據(jù)庫自動備份實現(xiàn)
這篇文章主要介紹了小程序云開發(fā) 數(shù)據(jù)庫自動備份實現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08
JavaScript如何將后端獲取到的byte數(shù)組轉(zhuǎn)為文件
這篇文章主要給大家介紹了關(guān)于JavaScript如何將后端獲取到的byte數(shù)組轉(zhuǎn)為文件的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-04-04

