博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
DOM何时Ready
阅读量:7130 次
发布时间:2019-06-28

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

由于script标签在被加载完成后会立即执行其中代码,如果在代码中要访问HTMLElement,可是这时候元素还没有加载进来,所以对元素的操作统统无效。

  最早的时候使用window.onload = function(){...},使得代码在页面完全加载完成后执行,这种方法对于页面资源很小的情况下是没问题的。弊端在于有时候页面中回加载一些比较费时的img、flash等资源,这种情况下浏览器会一直等待这些资源加载完成后再执行js代码。而浏览器中有DOM树跟Render树的区分,我们当然希望DOM树生成后便可以执行js代码,而不需要一定等待Render树完成后采取执行。

  HTML5中加入了事件,该事件在DOM树加载完成后便会触发(实际上大多数浏览器通常在样式资源加载完成后才会触发该事件,这个时候DOM可能早就加载完成了)。

  对于不支持DOMContentLoaded事件的浏览器,我们通过监听document的事件来判断DOM加载情况。从理论上来说,document有一属性名唤,在页面加载过程中该属性的值会经过三次变化:loading(加载阶段)、interactive(DOM解析完成)、complete(完全加载完成,相当于onload)。但是浏览器的有时候并不会依次经过这三次变化。

  在IE中有某些DOM方法,必须在DOM加载完成后方可调用(注意是调用,不是访问),一般情况下通过轮询调用doScroll方法来检测,当调用成功时表明DOM已加载完成。但需要注意的是,当页面中有iframe元素时,会等到iframe完全渲染结束后,调用才可成功,这时候于调用onload方法没什么区别。还有一点,在IE中,document.body必须在DOM解析完成后才可以访问body元素,而FF中即使DOM没有加载完成也可访问,这一点经常在IE中被用作判断DOM加载完成时的一个依据。

  下面是参考资料后,自己写的一个domready方法:

           
MyDomReady

  以下为chrome、FF、IE9和IE7、8中的测试结果

 

  本人能力有限,其中有不足的地方欢迎各位道友不吝指正

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

你可能感兴趣的文章
PHP的"php://input"和$HTTP_RAW_POST_DATA 和$_POST的关系
查看>>
解决ERROR: % Invalid input detected at '^' marker.
查看>>
webpack 2 打包实战
查看>>
小程序环境搭建与开发工具的简单介绍
查看>>
我的友情链接
查看>>
red hat5安装mysql5.5.25
查看>>
深入理解C++的动态绑定和静态绑定
查看>>
cisco 7200 simulator
查看>>
JAVA WEB搭建 SpringMVC+Spring+hibernate 框架
查看>>
HibernateTemplate中常用的方法
查看>>
clang: error: unknown argument: 'websockets'解决方法
查看>>
Vue.js 特有的一种ajax——axios
查看>>
我的友情链接
查看>>
dos2unix命令 - 将DOS格式文本文件转换成UNIX格式
查看>>
灰度发布
查看>>
我的友情链接
查看>>
PHP中curl错误号对照表
查看>>
我的学习笔记之js
查看>>
【转】亂數產生器:Random 與 RNGCryptoServiceProvider
查看>>
iptables基本概念深入理解
查看>>