有啊彩票走势图
靠譜的軟件下載站
當前位置:  IEfans/ IE專區/ IE修復/ JS兼容所有瀏覽器的DOMContentLoaded事件

JS兼容所有瀏覽器的DOMContentLoaded事件

IE修復 秩名 2019-04-03 09:04

使用JavaScript操作dom元素的時候,通常會將獲取dom元素的代碼放在window.onload=function(){}事件處理函數中,但window.onload事件在某些開始后可能會影響客戶體驗,因為要等待所有的腳本,css代碼和圖片等內容加載完畢才會觸發此事件,尤其是如果圖片量很大的情況下,會嚴重客戶體驗。所以很多時候,只需要DOM結構加載完畢即可,jQuery的$(document).ready(function(){})實現此功能,下面介紹一下原生JavaScript如何實現此功能。

實現過程介紹:

標準瀏覽器中,使用DOMContentLoaded事件即可實現我們的要求,注冊事件處理函數也極為簡單。

代碼如下:

JS兼容所有瀏覽器的DOMContentLoaded事件

但IE8和IE8以下瀏覽器并不支持DOMContentLoaded事件,所以還需要另辟蹊徑來解決此問題。

可能很多朋友認為根據document.onreadystatechange事件的document.readyState狀態是否等于complete來判斷dom結構是否加載完畢,但經過測試并不能完成任務,如果頁面使用iframe引入子頁面,會有問題。

解決方案如下:

低版本IE瀏覽器特有的doScroll方法,當dom結構沒有加載完成時,調用此方法會報錯,于是可以通過定時器函數不斷的調用此方法,并結合try catch語句來實現判斷功能,代碼如下:

JS兼容所有瀏覽器的DOMContentLoaded事件

代碼實現了兼容所有瀏覽器的DOMContentLoaded效果,下面介紹一下它的實現過程。

一.代碼注釋:

(1).eventQueue = [],聲明一個空數組,用來要執行的函數隊列。

(2).isReady = false,聲明一個變量并賦初值為false,如果為true則表示dom已經加載完畢。

(3).isBind = false,聲明一個變量并賦初值為false,如果為true,則表示時間處理函數綁定完畢。

(4).function domReady(fn){},此函數實現了等dom加載完畢再去執行fn函數的功能。

(5).if(isReady){fn.call(window);},如果變量值為true,則直接執行函數。

(6).else{eventQueue.push(fn);},將要執行的函數加入數組中。

(7).bindReady(),此函數可以實現注冊事件處理函數。

(8).if(isReady) return,如果等于true,直接跳出函數,這個時候fn函數已經被執行。

(9).if(isBind) return,如果已經注冊的話,同樣無需進行第二次。

(10).isBind=true,將變量的值修改為true。

(11).if(window.addEventListener){document.addEventListener('DOMContentLoaded',execFn,false);},如果是標準瀏覽器則使用addEventListener注冊事件處理函數。

(12).else if(window.attachEvent){doScroll();},如果IE8及IE8以下瀏覽器,調用doScroll方法實現此效果。

(13).function doScroll(){},此函數可以使用利用定時器函數不斷的調用doScroll()函數,如果報錯,則繼續調用,否則的話,也就是dom結構加載完畢,于是就執行相關函數。

(14).function execFn(){},此函數可以從數組中取出要執行的函數,然后執行,并最后將數組清空。

標簽: IE修復

Copyright ? 1998-2019 www.gxrch.com.cn All Rights Reserved 湘ICP備13012168號-17
有啊彩票走势图