使用 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 语句来实现判断功能,代码如下:
代码实现了兼容所有浏览器的 DOMContentLoaded 效果,下面介绍一下它的实现过程.
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
});
一. 代码注释:
(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(){},此函数可以从数组中取出要执行的函数,然后执行,并最后将数组清空.
总结
以上所述是小编给大家介绍的 JS 兼容所有浏览器的 DOMContentLoaded 事件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
JS,CSS 以及 img 对 DOMContentLoaded 事件的影响
Javascript 封装 DOMContentLoaded 事件实例
浅谈 js 中 startsWith 函数不能在任何浏览器兼容的问题
Base64(二进制) 图片编码解析及在各种浏览器的兼容性处理
JavaScript 自定义浏览器滚动条兼容 IE, 火狐和 chrome
微信浏览器弹出框滑动时页面跟着滑动的实现代码(兼容 Android 和 IOS 端)
JS IOS/iPhone 的 Safari 浏览器不兼容 Javascript 中的 Date() 问题如何解决
浅谈解决 360 兼容模式浏览器的方法
来源: http://www.jb51.net/article/132741.htm