JavaScript页面加载完成执行代码的几种方式详解

页面加载后执行JS代码概述

在实际开发中，通常需要在页面加载完毕后再执行特定的JavaScript代码。这样做的目的是确保相关的DOM元素已经存在，避免因元素未加载完成而执行JS代码导致的错误。本文将介绍几种实现页面加载完成后执行代码的基础方法，旨在为初学者提供清晰的指导。

window.onload事件详解

一、window.onload事件

具体实现代码如下：

原生JavaScript实现

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

jQuery实现方式

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

该方式确保在页面完全加载完毕后执行代码。这适用于需要进行DOM操作且必须等待所有资源加载完成的场景。

jQuery ready事件应用

二、使用jQuery的ready事件

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

常规用法

(function () {
//code
}
})();

该方式在DOM结构加载完毕后执行代码，适用于仅需操作DOM树结构的场景。

DOM加载与全资源加载的区别

通用的页面加载后再运行JS主要有两种情况：1、在DOM加载完毕后，但页面全部内容（如图片等）完全加载前运行JS。2、在页面全部内容加载完成（包括引用文件、图片等）之后再加载JS。

1、在DOM加载后，全部内容加载前运行 这种方式在同一文件中可以运行多个且不会相互覆盖。

由于在$(document).ready()方法只要DOM就绪就会被执行，因此可能此时元素的关联文件未下载完。例如与图片有关的HTML下载完毕，并且已经解析为DOM树了，但很有可能图片还未加载完毕，所以例如图片的高度和宽度这样的属性此时不一定有效。要解决这个问题，可以使用Jquery中 load（）方法在需要的文件加载完毕后对其进行操作。

$(document).ready(function(){}); $().ready(function(){}) //简写 当$()不带参数时默认就是document $(function(){}); //简写

2、在全部内容加载后运行 这种方式中只能执行一个 onload代码，当文件由多个onload或者load，只加载最后一个，前面的将会被覆盖且前面的onload里面的代码不会执行。

window.onload = function(){}; // —-js $(window).load(function(){}); //---jquery

DOM文档加载步骤解析

3、DOM文档加载步骤

1.解析HTML结构 2.加载外部的脚本和样式文件 3.解析并执行脚本代码 4.执行$(function(){})内对应代码 5.加载图片等二进制资源 6.页面加载完毕，执行window.onload

常见执行方式对比与总结

补充说明：

1：$(function){};

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

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

4：window.onload = function(){};

5：在标签上静态绑定onload事件，<body onload="aaa()">等待body加载完成，就会执行aaa()方法。

注：第1种是第2种的简写方式。两个是document加载完成后就执行方法。第3种和第4种都是等到整个window加载完成执行方法体。两者也没有区别，只是一个使用dom对象，一个使用jQuery对象。

执行顺序：1和2无论放在哪里都是最先执行，3和4在其之后执行，5最后执行