原生JS實(shí)現(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的方法提取出來,單獨(dú)使用了。
如果只需要對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實(shí)現(xiàn)DOM加載完成馬上執(zhí)行JS代碼的方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
- JS中DOM元素的attribute與property屬性示例詳解
- JavaScript實(shí)現(xiàn)的DOM繪制柱狀圖效果示例
- JS實(shí)現(xiàn)同一DOM元素上onClick事件與onDblClick事件并存的解決方法
- JS常見DOM節(jié)點(diǎn)操作示例【創(chuàng)建 ,插入,刪除,復(fù)制,查找】
- JavaScript DOM元素常見操作詳解【添加、刪除、修改等】
- JavaScript實(shí)現(xiàn)的DOM樹遍歷方法詳解【二叉DOM樹、多叉DOM樹】
- 學(xué)習(xí)JS中的DOM節(jié)點(diǎn)以及操作
- JS中獲取 DOM 元素的絕對位置實(shí)例詳解
- JS實(shí)現(xiàn)DOM刪除節(jié)點(diǎn)操作示例
- JS實(shí)現(xiàn)的DOM插入節(jié)點(diǎn)操作示例
- JS遍歷DOM文檔樹的方法實(shí)例詳解
- js中DOM事件綁定分析
- 在js代碼拼接dom對象到頁面上的模板總結(jié)
相關(guān)文章
從數(shù)據(jù)庫讀取數(shù)據(jù)后將其輸出成html標(biāo)簽的三種方法
需要輸出成html標(biāo)簽時編譯器卻自動幫我們輸出成字符串,這該怎么辦?下面有個三個解決方法,一一測試便知其效果是如何2014-10-10JavaScript學(xué)習(xí)筆記之?dāng)?shù)組的增、刪、改、查
這篇文章主要介紹了JavaScript學(xué)習(xí)筆記之?dāng)?shù)組的增、刪、改、查的相關(guān)資料,需要的朋友可以參考下2016-03-03js實(shí)現(xiàn)內(nèi)容顯示并使用json傳輸數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)內(nèi)容顯示并使用json傳輸數(shù)據(jù)的方法,感興趣的小伙伴們可以參考一下2016-03-03JavaScript實(shí)現(xiàn)復(fù)制功能各瀏覽器支持情況實(shí)測
這兩天在做Web前端時,遇到需求通過js實(shí)現(xiàn)文本復(fù)制的功能,下面與大家分享下各瀏覽器對復(fù)制功能的支持情況,感興趣的朋友可以參考下哈2013-07-07