有时候我们只想在 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加载完成的更多相关文章

  1. 原生JS实现AJAX、JSONP及DOM加载完成事件，并提供对应方法

    JS原生AJAX ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRequest 对象: ajax 请求过程:创建 XMLHttpRequest 对象.连接服务 ...

  2. 原生JS实现AJAX、JSONP及DOM加载完成事件

    一.JS原生Ajax ajax:一种请求数据的方式,不需要刷新整个页面:ajax的技术核心是 XMLHttpRequest 对象:ajax 请求过程:创建 XMLHttpRequest 对象.连接服务 ...

  3. 【转】js JavaScript 的性能优化：加载和执行

    JavaScript 的性能优化:加载和执行 转自:https://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/ 随着 Web2.0 技术的 ...

  4. jquery源码 DOM加载

    jQuery版本:2.0.3 DOM加载有关的扩展 isReady:DOM是否加载完(内部使用) readyWait:等待多少文件的计数器(内部使用) holdReady():推迟DOM触发 read ...

  5. 【Dojo 1.x】笔记3 等待DOM加载完成

    有的web页面总是得等DOM加载完成才能继续执行功能,例如,待页面DOM加载完成后,才能在DIV上进行渲染图形. Dojo提供了这个功能的模块,叫domReady,但是由于它很特殊,就在结尾加了个叹号 ...

  6. 第一百四十一节，JavaScript，封装库--DOM加载

    JavaScript,封装库--DOM加载 DOM加载,跨浏览器封装DOM加载,当网页文档结构加载完毕后执行函数,不等待图片音频视频等文件加载完毕 /** dom_jia_zai()函数,DOM页面加 ...

  7. DOM加载过程中ready和load的区别

    在浏览器地址栏输入URL地址,浏览器开始加载页面时,有以下几个过程 1.浏览器开始解析HTML文档 2. 浏览器遇到HTML文档中的<script>元素以及CSS样式文件,并且没有asyn ...

  8. jQuery实现DOM加载方法源码分析

    传统的判断dom加载的方法 使用 dom0级 onload事件来进行触发所有浏览器都支持在最初是很流行的写法 我们都熟悉这种写法: window.onload=function(){ ... }  但 ...

  9. angularjs ocLazyLoad分步加载js文件,angularjs ocLazyLoad按需加载js

    用angular有一段时间了,平日里只顾着写代码,没有注意到性能优化的问题,而今有时间,于是捋了捋,讲学习过程记录于此: 问题描述:由于采用angular做了网页的单页面应用,需要一次性在主布局中将所 ...

随机推荐

  1. 使用AJAX技术发送异步请求，HTTP服务端推送

    使用AJAX技术发送异步请求 什么是AJAX AJAX指一步Javascript和XML(Asynchronous JavaScript And XML),它是一些列技术的组合,简单来说AJAX基于X ...

  2. Flask内置URL变量转换器

    Flask内置URL变量转换器: 转换器通过特定的规则执行,”<转换器: 变量名>”.<int: year>把year的值转换为证书,因此我们可以在视图函数中直接对year变量 ...

  3. QThread详解

    回顾Qt之线程(QThread),里面讲解了如何使用线程,但还有很多人留言没有看明白,那么今天我们来一起瞅瞅关于QThread管理线程的那些事儿... 一.线程管理 1.线程启动 void start ...

  4. [转载]基于UML的需求分析和系统设计（完整案例和UML图形演示）

    小序: 从学生时代就接触到UML,几年的工作中也没少使用,各种图形的概念.图形的元素和属性,以及图形的画法都不能说不熟悉.但是怎样在实际中有效地使用UML使之发挥应有的作用,怎样捕捉用户心中的需求并转 ...

  5. flask框架----flask入门

    一.Flask介绍(轻量级的框架,非常快速的就能把程序搭建起来) Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是 ...

  6. puts函数

    1.puts函数是gets函数的输出版本,它把指定的字符串写到标准输出并在末尾添加一个换行符 #include <stdio.h> #include <stdlib.h> in ...

  7. tomcat部署solr4.10

    1.创建solrHome mkdir /opt/solrHome 2.拷贝solr基础数据 /example/solr/* /opt/solrHome 将contrib和dist两个目录拷贝到/opt ...

  8. 写给大忙人的CentOS 7下最新版(6.2.4)ELK+Filebeat+Log4j日志集成环境搭建完整指南

    现在的公司由于绝大部分项目都采用分布式架构,很早就采用ELK了,只不过最近因为额外的工作需要,仔细的研究了分布式系统中,怎么样的日志规范和架构才是合理和能够有效提高问题排查效率的.经过仔细的分析和研究 ...

  9. 基础_cifar10_序贯

    今天的基础研究主要是在cifar10数据集上解决一下几个问题: 1.从头开始,从最简单的序贯开始,尝试model的构造: 2.要将模型打印出来.最好是能够打印出图片,否则也要summary; 3.尝试 ...

  10. 20155201 网络攻防技术 实验八 Web基础

    20155201 网络攻防技术 实验八 Web基础 一.实践内容 Web前端HTML,能正常安装.启停Apache.理解HTML,理解表单,理解GET与POST方法,编写一个含有表单的HTML. We ...