js实现类型jq的dom加载完成
有时候我们只想在 dom 加载完成后运行 js ，而不是等所有图片加载完成。所以不需要 onload ， onload 会加载图片等其他媒体。很消耗时间。
原：http://blog.csdn.net/shoushou71/article/details/52252340
前沿
处理页面文档加载的时候，我们遇到一个难题，就是使用window.onload这种将所有内容加载后（包括DOM文档结构，外部脚本、样式，图片音乐等）这样会导致在长时间加载页面的情况下，js程序是不可用的状态。而JS其实只需要HTML DOM文档结构构造完毕之后就可以使用了，没必要等待诸如图片音乐和外部内容加载。 一．问题所在 首先了解一下浏览器加载的顺序： 1.HTML解析完毕； 2.外部脚本和样式加载完毕； 3.脚本在文档内解析并执行； 4.HTML DOM完全构造起来； 5.图片和外部内容加载； 6.网页完成加载。 PS：这里要了解一个问题，1-4的加载是极快的，一刹那而已。而第5条，根据网速和内容的多少各有快慢，但总体上如果有图片和外部内容的话，比1-4条加起来都要慢很多。 PS：并且JS的document.getElementById这些只需要1-4条加载完毕后方可执行，并不需要加载第5条，所以，我们需要一种可以代替window.onload的更加快捷的加载方案。 前台测试代码： ``` html
<body>
<div id="box">box</div>
<img
src="http://h.hiphotos.baidu.com/album/s%3D1600%3Bq%3D100/sign=0686e4a05982b2b7a39f3
dc2019df09e/d01373f082025aaf03cd026ffbedab64024f1a92.jpg"></img </body>
``` ``` js
//传统的DOM加载
window.onload = function () {
var box = document.getElementById('box');
alert(box.innerHTML);
}; ``` //PS：如果有图片，那么图片加载完毕后，方可执行onload里面的内容 二、解决方案 非IE浏览器提供了一种加载事件：DOMContentLoaded事件，这个事件可以在完成HTML DOM结构之后就会触发，不会理会图像音乐、JS文件、CSS文件或其他资源是否已经下载完毕。 目前支持DOMContentLoaded事件浏览器有：IE9+、Firefox、Chrome、Safari 3.1+和Opera 9+都支持。 ``` html
//DOMContentLoaded事件加载
if (document.addEventListener) { //DOM结构加载完毕
addEvent(document, 'DOMContentLoaded', function () {
var box = document.getElementById('box');
alert(box.innerHTML);
});
}
<span style="font-size:14px;color:#333333;"><span style="font-family:宋体;">//PS：如果有图片，先执行节点操作的内容，然后再缓缓加载图片，也就是说，当DOM树结构加载完毕后即可执行了</span></span>
<span style="font-size:14px;color:#333333;"><span style="font-family:宋体;"></span></span>
``` IE不支持DOMContentLoaded事件，可以采用方式：创建空script标签，属性拥有defer，这个属性就是定义需要加载完毕后执行，然后待onreadystatechange为complete时，表示DOM结构加载完毕了，再执行。 ``` html
//IE浏览器加载
document.write("<script id=\"ie_onload\" defer=\"defer\" src=\"javascript:void(0)\">
<\/script>");
var script = document.getElementById("ie_onload");
script.onreadystatechange = function () {
if (this.readyState=='complete') {
var box = document.getElementById('box');
alert(box.innerHTML);
}
};
``` 另外，在IE浏览器如果网页上有<iframe>加载另一个网页，我们发现IE浏览器还需要加载完毕iframe所有的内容才可以执行。而非IE浏览器的DOMContentLoaded事件则还是DOM加载完毕后就执行了，在这里我们就发现IE的这种方式并不完美，当然，如果页面没有iframe的话就够用了。 在IE中，任何DOM元素都有一个doScroll 方法，无论它们是否支持滚动条。为了判断DOM树是否建成，我们只看看documentElement是否完整就是，因为，它作为最外层的元素，作为 DOM树的根部而存在，如果documentElement完整的话，就可以调用doScroll方法了。当页面一加载JS时，我们就执行此方法，当然要 如果documentElement还不完整就会报错，我们在catch块中重新调用它，一直到成功执行，成功执行时就可以调用 fn方法了 ``` js
//使用doScroll()来判断DOM加载完毕
var timer = null;
timer = setInterval(function () {
try {
document.documentElement.doScroll('left');
var box = document.getElementById('box');
alert(box.innerHTML);
} catch (ex) {};
}); ``` 由此，我们可以结合一下上面两种方案，做一个兼容的函数方便调用。 ``` js
function addDomLoaded(fn) {
if (document.addEventListener) { //W3C
addEvent(document, 'DOMContentLoaded', function () {
fn();
removeEvent(document, 'DOMContentLoaded', arguments.callee);
});
}
else { //IE
var timer = null;
timer = setInterval(function () {
try {
document.documentElement.doScroll('left');
fn();
} catch (ex) {};
});
}
} addDomLoaded(function () {
var box = document.getElementById('box');
alert(box.innerHTML);
});
//PS：有效，DOM加载完毕后执行了节点操作，并且后面才加载完毕图片
``` 三、总结：
虽然以上对于主流浏览器和主流浏览器的版本已经非常够用了，但还有几个小细节我们需要了解一下。Opera8之前不支持，webkit引擎浏览器525之前不支持，Firefox2有严重bug。
对于非IE，又不支持DOMContentLoaded，可以直接用传统的window.onload来执行，因为目前来说这种浏览器基本灭绝了，也可以document.readyState轮询，直到完毕。
js实现类型jq的dom加载完成的更多相关文章
- 原生JS实现AJAX、JSONP及DOM加载完成事件，并提供对应方法
JS原生AJAX ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRequest 对象: ajax 请求过程:创建 XMLHttpRequest 对象.连接服务 ...
- 原生JS实现AJAX、JSONP及DOM加载完成事件
一.JS原生Ajax ajax:一种请求数据的方式,不需要刷新整个页面:ajax的技术核心是 XMLHttpRequest 对象:ajax 请求过程:创建 XMLHttpRequest 对象.连接服务 ...
- 【转】js JavaScript 的性能优化：加载和执行
JavaScript 的性能优化:加载和执行 转自:https://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/ 随着 Web2.0 技术的 ...
- jquery源码 DOM加载
jQuery版本:2.0.3 DOM加载有关的扩展 isReady:DOM是否加载完(内部使用) readyWait:等待多少文件的计数器(内部使用) holdReady():推迟DOM触发 read ...
- 【Dojo 1.x】笔记3 等待DOM加载完成
有的web页面总是得等DOM加载完成才能继续执行功能,例如,待页面DOM加载完成后,才能在DIV上进行渲染图形. Dojo提供了这个功能的模块,叫domReady,但是由于它很特殊,就在结尾加了个叹号 ...
- 第一百四十一节，JavaScript，封装库--DOM加载
JavaScript,封装库--DOM加载 DOM加载,跨浏览器封装DOM加载,当网页文档结构加载完毕后执行函数,不等待图片音频视频等文件加载完毕 /** dom_jia_zai()函数,DOM页面加 ...
- DOM加载过程中ready和load的区别
在浏览器地址栏输入URL地址,浏览器开始加载页面时,有以下几个过程 1.浏览器开始解析HTML文档 2. 浏览器遇到HTML文档中的<script>元素以及CSS样式文件,并且没有asyn ...
- jQuery实现DOM加载方法源码分析
传统的判断dom加载的方法 使用 dom0级 onload事件来进行触发所有浏览器都支持在最初是很流行的写法 我们都熟悉这种写法: window.onload=function(){ ... } 但 ...
- angularjs ocLazyLoad分步加载js文件,angularjs ocLazyLoad按需加载js
用angular有一段时间了,平日里只顾着写代码,没有注意到性能优化的问题,而今有时间,于是捋了捋,讲学习过程记录于此: 问题描述:由于采用angular做了网页的单页面应用,需要一次性在主布局中将所 ...
随机推荐
- for-each 循环原理
for-each 循环原理1,for-each 是在java5 之后出现的.for是java 上的一个关键字,在jdk 找不到任何for的底层实现的.是因为for的底层实现被封装到了编译器中.所以通过 ...
- numpy高级应用
reshape重塑数组 ravel 拉平数组 concatenate 最一般化的连接,沿一条轴连接一组数组 # print(np.concatenate([arr1,arr2],axis = 0)) ...
- 基于EOS开发的Dapp大全
基于EOS开发的Dapp大全 截止20180424,基于EOS开发的项目在50,很多项目的规划信息还不完善,搜集了基本的信息,供大家参考. ==========================长期囤币 ...
- js数组内数字按大小排序实现函数
正常冒泡排序: function evlabc(a) { //排序大小 var i = j = t = 0; for (i = 0; i < a.length; i++) { for (j = ...
- RBAC
什么是rbac? -- 基于角色的权限控制 Role-Based Access Control 一个url就代表一个权限 // url分配给角色,角色分配给用户 -- 6个model,4张表 菜单表 ...
- バイナリハックイージー / Unhappy Hacking (ABC Edit) （stack）
题目链接:http://abc043.contest.atcoder.jp/tasks/abc043_b Time limit : 2sec / Memory limit : 256MB Score ...
- HDU 1879 继续畅通工程（最小生成树）
省政府“畅通工程”的目标是使全省任何两个村庄间都可以实现公路交通(但不一定有直接的公路相连,只要能间接通过公路可达即可).现得到城镇道路统计表,表中列出了任意两城镇间修建道路的费用,以及该道路是否已经 ...
- 大数据学习路线：Zookeeper集群管理与选举
大数据技术的学习,逐渐成为很多程序员的必修课,因为趋势也是因为自己的职业生涯.在各个技术社区分享交流成为很多人学习的方式,今天很荣幸给我们分享一些大数据基础知识,大家可以一起学习! 1.集群机器监控 ...
- 推荐：全新Java开发思维导图
蓦然回首自己做开发已经十年了,这十年中我获得了很多,技术能力.培训.出国.大公司的经历,还有很多很好的朋友. 但再仔细一想,这十年中我至少浪费了五年时间,这五年可以足够让自己成长为一个优秀的程序员,可 ...
- 一名3年工作经验的java程序员应该具备的职业技能
一名3年工作经验的Java程序员应该具备的技能,这可能是Java程序员们比较关心的内容.我这里要说明一下,以下列举的内容不是都要会的东西—-但是如果你掌握得越多,最终能得到的评价.拿到的薪水势必也越高 ...