JS兼容所有浏览器的DOMContentLoaded事件
67 浏览量
2020-10-18
19:56:21
上传
评论
收藏 59KB PDF 举报
JS兼容所有浏览器的兼容所有浏览器的DOMContentLoaded事件事件
主要介绍了JS兼容所有浏览器的DOMContentLoaded事件的相关资料，标准浏览器中，使用
DOMContentLoaded事件即可实现我们的要求，注册事件处理函数也极为简单，感兴趣的朋友一起学习吧
使用JavaScript操作dom元素的时候，通常会将获取dom元素的代码放在window.onload=function(){}事件处理函数中，但
window.onload事件在某些开始后可能会影响客户体验，因为要等待所有的脚本，css代码和图片等内容加载完毕才会触发此
事件，尤其是如果图片量很大的情况下，会严重客户体验。所以很多时候，只需要DOM结构加载完毕即可，jQuery
的$(document).ready(function(){})实现此功能，下面介绍一下原生JavaScript如何实现此功能。
实现过程介绍实现过程介绍:
标准浏览器中，使用DOMContentLoaded事件即可实现我们的要求，注册事件处理函数也极为简单。
代码如下:
addEventListener(‘DOMContentLoaded',fn,false)
但IE8和IE8以下浏览器并不支持DOMContentLoaded事件，所以还需要另辟蹊径来解决此问题。
可能很多朋友认为根据document.onreadystatechange事件的document.readyState状态是否等于complete来判断dom结构是
否加载完毕，但经过测试并不能完成任务，如果页面使用iframe引入子页面，会有问题。
解决方案如下：解决方案如下：
低版本IE浏览器特有的doScroll方法，当dom结构没有加载完成时，调用此方法会报错，于是可以通过定时器函数不断的调用
此方法，并结合try catch语句来实现判断功能，代码如下:
eventQueue = [];
isReady = false;
isBind = false;
function domReady(fn){
if(isReady){
fn.call(window);
}
else{
eventQueue.push(fn);
};
bindReady();
};
function bindReady(){
if(isReady) return;
if(isBind) return;
isBind=true;
if(window.addEventListener){
document.addEventListener('DOMContentLoaded',execFn,false);
}
else if(window.attachEvent){
doScroll();
};
};
function doScroll(){
try{
document.documentElement.doScroll('left');
}
catch(error){
return setTimeout(doScroll,20);
};
execFn();
};
function execFn(){
if(!isReady){
isReady=true;
for(var index=0;i<eventQueue.length;index++){
eventQueue[index].call(window);
};
eventQueue = [];
};
};
domReady(function(){
//code
});
domReady(function(){
//code
});
评论0
最新资源