document.readyState和document.DOMContentLoaded判断DOM的加载完成
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工具, 以往调用初始化的方法是:
现在有了DOMContentLoaded, 可以替换成如下的方法:
最新的prototype中自定义事件已经重新命名, 使用"dom:loaded" 代替了 “contentloaded”.
document.readyState和document.DOMContentLoaded判断DOM的加载完成的更多相关文章
- document.readyState等属性,判断页面是否加载完
如何在页面加载完成后再去做某事?什么方法可以判断当前页面加载已完成?document.readyState 判断页面是否加载完成?javascript提供了document.readyState==& ...
- window.onload 和 DOMContentLoaded区别及如何判断dom是否加载完毕
http://blog.allenm.me/2010/02/window-onload-和-domcontentloaded/ 其中使用IE不支持DOMContentLoaded,那么判断IE是否加载 ...
- js 判断页面是否加载完成
javascript代码如下: document.onreadystatechange = subSomething; //当页面加载状态改变的时候执行这个方法 function subSomethi ...
- jquery的ready方法(DOM是否加载完)详解与使用
jquery的ready方法(准备DOM触发)还是比较复杂的,我们先看流程图:
- 页面全部加载完毕和页面dom树加载完毕
dom树加载完毕 $(document).ready()//原生写法document.ready = function (callback) { ///兼容FF,Google ...
- 基于DOMContentLoaded实现文档加载完成后执行的方法
我们有时可能需要一些在页面加载完成之后执行的方法,其实js原生就提供了onload方法,所以我们最简单的办法就是直接给onload赋值一个函数,在页面加载完成之后就会自动执行 widnow.onloa ...
- js dom元素加载完成执行
//dom ready执行 function ready(fn){ if(document.addEventListener){ document.addEventListener('DOMConte ...
- js判断网页是否加载完毕 包括图片
<script type="text/javascript" language="JavaScript"> //: 判断网页是否加载完成 docum ...
- 如何判断css是否加载完成
要判断这个 CSS 文件是否加载完毕,各个浏览器的做法差异比较大,这次要说IE浏览器做的不错,我们可以直接通过onload方法来处理CSS加载完成以后的处理: // 代码节选至seajs functi ...
随机推荐
- python+selenium+chromewebdriver或Firefox的环境搭建
插件下载地址 chromewebdriver:https://chromedriver.storage.googleapis.com/index.html?path=2.26/放置在python下的S ...
- Git的安装配置
Git是什么 Git是一款免费.开源的分布式版本控制系统,可以有效.高速的处理从很小到非常大的项目版本管理. 与常用的版本控制工具CVS.Subversion等不同的是它采用了分布式版本库的方式,不必 ...
- springCloud的使用02-----服务消费者(rest+ribbon)
1 将服务提供者做成集群模式 配置service-hi的端口为8762进行启动,配置service-hi的端口为8763进行启动, service-hi会在ecureka server上注册两个ser ...
- C#获取文件夹/文件的大小以及占用空间 转摘自:http://www.cnblogs.com/chenpeng-dota/articles/2176470.html
C#获取文件夹/文件的大小以及占用空间 今天,头给了个任务:写个方法,我会给你个路径,计算这个路径所占用的磁盘空间 . 然后,找了很多资料.但大部分都是获取文件夹/文件的大小的.对于占用空间的没有成品 ...
- 【记录】Redis 基础
Redis可以存放五种类型 1:String(字符串) 2:List(列表) 3:Hash(字典) 4:Set(集合) 5:ZSet(有序集合) String (字符串) redis 127.0.0. ...
- 循环结构select 举例
- 网络编程NIO-异步
异步I/O是没有阻塞地读写数据的方法.通常在代码进行read调用时,代码会阻塞直至可供读取的数据.同样,write调用将会阻塞直至数据能够写入. 1.selector是一个对象,可以注册到很多个cha ...
- IronPython C#与Python相互调用
ironphy microsoft.scripting dll using System;using System.Collections.Generic;using System.Linq;usi ...
- 小白struts2 札记
struts2里面的filter 也就是起个过滤作用的 1 过滤request 请求2 过滤文件类型 禁用的文字等
- ambari安装hadoop
前言 hadoop除了社区版之外,还有两个主流的分支,一个是cdh版本,一个是hdp版本,其中ambari是hdp版本的部署工具 1.ambari安装准备 https://docs.hortonwor ...