原文网址：JS--页面加载完毕后执行_IT利刃出鞘的博客-CSDN博客

简介

说明

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

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

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

浏览器现象

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模拟DOMContentLoadedfunction 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(){...});

其他网址

JS 进阶(5) DOM操作：dom加载完毕执行js、创建节点、遍历节点、查找节点、删除节点_poorpenguin的博客-CSDN博客