JS--页面加载完毕后执行

简介

说明

        本文用示例介绍JavaScript如何在页面加载完毕之后执行函数。

页面加载完毕主要有两个事件：

1. 1. 
      
2. DOMContentLoaded事件：页面的DOM加载并解析完毕之后触发，不会等待CSS、图片、子框架加载完成。
3. onload事件：页面所有资源（包括DOM树、CSS、图片、第三方框架等）加载完毕时触发。
   1. 
      

浏览器现象

DOMContentLoaded事件：在Overview和Waterfall上用一条蓝色竖线标记，并且在Summary以蓝色文字显示确切的时间。

onload事件：在Overview和Waterfall上用一条红色竖线标记，在Summary也会以红色文字显示确切的时间。

方案1：原生JS

法1：DOMContentLoaded 事件

        DOMContentLoaded 事件：页面的DOM加载并解析完毕之后触发，不会等待CSS、图片、子框架加载完成。

        jquery中使用的$(document).ready(function(){}); 实际上监听的就是 DOMContentLoaded 事件。

function domReady(fn){
    //对于现代浏览器，对DOMContentLoaded事件的处理采用标准的事件绑定方式
    if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded", fn, false);
        // 不能这样写：window.onDOMContentLoaded
    } else {
        IEContentLoaded(fn);
    }

    //IE模拟DOMContentLoaded
    function IEContentLoaded (fn) {
        var doc = window.document;
        var done = false;
        //只执行一次用户的回调函数init()
        var init = function () {
            if (!done) {
                done = true;
                fn();
            }
        };

        (function () {
            try {
                // DOM树未创建完之前调用doScroll会抛出错误
                d.documentElement.doScroll('left');
            } catch (e) {
                //延迟再试一次~
                setTimeout(arguments.callee, 50);
                return;
            }
            // 没有错误就表示DOM树创建完毕，然后立马执行用户回调
            init();
        })();

        //监听document的加载状态
        doc.onreadystatechange = function() {
            // 如果用户是在domReady之后绑定的函数，就立马执行
            if (doc.readyState == 'complete') {
                doc.onreadystatechange = null;
                init();
            }
        }
    }
}

法2：onload事件

onload事件：页面所有资源（包括DOM树、CSS、图片、第三方框架等）加载完毕时触发。

window.onload = function(){
  ...
}

或者

window.addEventListener('load',  function(){
  ...
})

方案2：jQuery

法1：ready()函数

说明

页面的DOM加载并解析完毕之后触发，不会等待CSS、图片、子框架加载完成。

实际上监听的就是 DOMContentLoaded 事件。

代码

写法一：标准写法

$(document).ready(function(){
  ...
});

写法二：简写

$(function(){
  ....
})

法2：load()函数

页面所有资源（包括DOM树、CSS、图片、第三方框架等）加载完毕时触发。

实际上监听的就是 onload 事件。

$(window).load(function(){
  ...
});