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

ゝ一纸荒年。 2023-10-01 10:00 43阅读 0赞

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

## 简介 ##

**说明**

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

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

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

**浏览器现象**

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

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

![49aa968498ff4886aea96a617b55646f.png][]

## 方案1：原生JS ##

### 法1：DOMContentLoaded 事件 ###

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

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

### 法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博客][JS _5_ DOM_dom_js_poorpenguin_-CSDN]

[JS--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122005846
[49aa968498ff4886aea96a617b55646f.png]: https://img-blog.csdnimg.cn/49aa968498ff4886aea96a617b55646f.png
[JS _5_ DOM_dom_js_poorpenguin_-CSDN]: https://blog.csdn.net/weixin_39141044/article/details/83582384