博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
document.readyState和document.DOMContentLoaded判断DOM的加载完成
阅读量:7106 次
发布时间:2019-06-28

本文共 1505 字,大约阅读时间需要 5 分钟。

document.readyState:判断文档是否加载完成。firefox不支持。

这个属性是只读的,传回值有以下的可能:

0-UNINITIALIZED:XML 对象被产生,但没有任何文件被加载。

1-LOADING:加载程序进行中,但文件尚未开始解析。
2-LOADED:部分的文件已经加载且进行解析,但对象模型尚未生效。
3-INTERACTIVE:仅对已加载的部分文件有效,在此情况下,对象模型是有效但只读的。
4-COMPLETED:文件已完全加载,代表加载成功。

document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法.

function subSomething()
{
if(document.readyState == "complete"){ //当页面加载状态为完全结束时进入
//你要做的操作。

else if(document.readyState=="loading"){

}

}

 

说明 :onreadystatechange 事件能辨识readyState 属性的改变。

 

----------------------------------------------------

firefox  DOMContentLoaded

---------------------------------------------------

今天查看百度空间源代码,发现多了个util.js文件,打开看看。里面里面定义了addDOMLoadEvent。这是干什么用的?

仔细查看代码,发现在Mozilla添加了DOMContentLoaded事件,这个在以前一直没有用过。                    if (document.addEventListener)

                        document.addEventListener("DOMContentLoaded", init, false);

好像就是为了兼容实现DOMContentLoaded事件。

网上找了点有关DOMContentLoaded的资料拿来看看。

DOMContentLoaded是firefox下特有的Event, 当所有DOM解析完以后会触发这个事件。

    与DOM中的onLoad事件与其相近。但onload要等到所有页面元素加载完成才会触发, 包括页面上的图片等等。
    如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 而在Ajax运用中, 常常需要在onload中加入许多初始化的动作, 如果由于网络问题引起的图片加载过慢( 见: Ajax优化(2) -- lazierLoad img && js), 则必然影响用户的体验。
    在这种情况下firefox的DOMContentLoaded事件, 恰恰是我们需要的。
    目前,跨平台的DOMContentLoaded的解决方案有很多, 比如jQuery, Prototype...等等, 其实现原理大同小异.
    在项目中, 我使用了Prototype工具, 以往调用初始化的方法是:

Event.observe(window, "load", init);

    现在有了DOMContentLoaded, 可以替换成如下的方法:

document.observe('contentloaded', init);

    最新的prototype中自定义事件已经重新命名, 使用"dom:loaded" 代替了 “contentloaded”.

document.observe('dom:loaded', init);

转载地址:http://bpphl.baihongyu.com/

你可能感兴趣的文章
apache下mod_jk模块学习随笔
查看>>
Android学习--03-活动
查看>>
VMware-workstation-full-9.0.0-812388附注册机
查看>>
重新安装.net framework 4.5
查看>>
常用开发资源收集
查看>>
年近30,朋友聚会都聊什么?
查看>>
发布jar包至maven本地库及私服
查看>>
Xshell 创建RSA登录Linux 主机
查看>>
非常酷的国外网站导航设计案例欣赏
查看>>
ASP.NET身份验证的探讨
查看>>
Java反射与注解
查看>>
判断一个数是否为回文数,字符串是否为回文字符串
查看>>
Windows Live Writer 2009 客户端离线写51CTO博客
查看>>
date_default_timezone_set的问题
查看>>
不安装oracle客户端,用plsql连接oracle
查看>>
让孩子爱上学习-获取安卓
查看>>
[iOS Animation]CALayer-图层时间 二
查看>>
更新日志 - fir.im 回归,上线 Android Studio 插件
查看>>
我的友情链接
查看>>
spring遇到的异常整理
查看>>