封装DOMContentLoaded事件详解编程语言

//保存domReady的事件队列 
eventQueue = []; 
//判断DOM是否加载完毕 
isReady = false; 
//判断DOMReady是否绑定 
isBind = false; 
/*执行domReady() 
* 
[email protected]    {function} 
[email protected]  将事件处理程序压入事件队列,并绑定DOMContentLoaded 
*          如果DOM加载已经完成,则立即执行 
[email protected] 
*/ 
function domReady(fn){ 
if (isReady) { 
fn.call(window); 
} 
else{ 
eventQueue.push(fn); 
}; 
bindReady(); 
}; 
/*domReady事件绑定 
* 
[email protected]    null 
[email protected]  现代浏览器通过addEvListener绑定DOMContentLoaded,包括ie9+ 
ie6-8通过判断doScroll判断DOM是否加载完毕 
[email protected]   domReady() 
*/ 
function bindReady(){ 
if (isReady) return; 
if (isBind) return; 
isBind = true; 
if (window.addEventListener) { 
document.addEventListener('DOMContentLoaded',execFn,false); 
} 
else if (window.attachEvent) { 
doScroll(); 
}; 
}; 
/*doScroll判断ie6-8的DOM是否加载完成 
* 
[email protected]    null 
[email protected]  doScroll判断DOM是否加载完成 
[email protected]   bindReady() 
*/ 
function doScroll(){ 
try{ 
document.documentElement.doScroll('left'); 
} 
catch(error){ 
return setTimeout(doScroll,20); 
}; 
execFn(); 
}; 
/*执行事件队列 
* 
[email protected]    null 
[email protected]  循环执行队列中的事件处理程序 
[email protected]   bindReady() 
*/ 
function execFn(){ 
if (!isReady) { 
isReady = true; 
for (var i = 0; i < eventQueue.length; i++) { 
eventQueue[i].call(window); 
}; 
eventQueue = []; 
}; 
}; 
//js文件1 
domReady(function(){ 
}); 
//js文件2 
domReady(function(){ 
}); 
//注意,如果是异步加载的js就不要绑定domReady方法,不然函数不会执行, 
//因为异步加载的js下载之前,DOMContentLoaded已经触发,addEventListener执行时已经监听不到了 

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/10059.html

(0)
上一篇 2021年7月19日
下一篇 2021年7月19日

相关推荐

发表回复

登录后才能评论