使用JavaScript操纵DOM,必须等待DOM加载完毕才可以执行代码,但window.onload有个坏处,它非要等到页面中的所有图片及视频加载完毕才会触发load事件。结果就是一些本来应该在打开时隐藏起来的元素,由于网络延迟,在页面打开时仍然会出现,然后又会突然消失,让用户觉得莫名其妙。必须与这种丑陋的闪烁告别!
在W3C中提供了
DOMContentLoaded事件.
方法为:
document.addEventListener("DOMContentLoaded", init, false);
但是这个
方法IE并不支持,但是在IE中也有解决的办法。可以对IE使用条件注释,并使用script标签的defer(延迟加载)属性,这样标签 中的脚本 就只能在DOM加载完成后才执行。方法如下:
<script defer="defer" src="javascript:void(0)"> </script>
可以将整个添加事件写到一个函数里面。代码如下(来源于网络):
function addLoadEvent(fn)
{
var init = function()
{
if (arguments.callee.done) return;
arguments.callee.done = true;
fn.apply(document,arguments);
};
//注册DOMContentLoaded事件,如果支持的话
if (document.addEventListener)
{
document.addEventListener("DOMContentLoaded", init, false);
}
//但对于Safari,我们需要使用setInterval方法不断检测document.readyState
//当为loaded或complete的时候表明DOM已经加载完毕
if (/WebKit/i.test(navigator.userAgent))
{
var _timer = setInterval(function()
{
if (/loaded|complete/.test(document.readyState))
{
clearInterval(_timer);
init();
}
},10);
}
//对于IE则使用条件注释,并使用script标签的defer属性
//IE中可以给script标签添加一个defer(延迟)属性,这样,标签中的脚本只有当DOM加载完毕 后才执行
return true;
}