jquery实现函数在页面加载完成之后执行

使用window.onload和$(document).ready()函数实现在web页面加载完成之后再执行函数的方法。只需要使用其中一个，将函数放在方法内，web再加载完成之后会根据出现顺序执行。

使用方法

在HTML中引入js

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" crossorigin="anonymous"></script>

JavaScript代码

$(function(){
// 点击事件
    $("#a").click(function(){
      console.log('主动点击');
　　});
});
// 第一种方法
$(document).ready(function(){
　　$("#a").click(function(){
      console.log('ready加载之后触发');
　　});
});
//第二种方法
window.onload = function(){
　　$("#a").click(function(){
　　　　console.log('onload加载之后触发');
　　});
}

HTML代码

<input type="button" id="a">点击</input>

区别

$(document).ready()函数用于在文档进入ready状态时执行代码。当DOM 完全加载（例如HTML被完全解析DOM树构建完成时），jQuery允许你执行代码。使用$(document).ready()的最大好处在于它适用于所有浏览器，jQuery帮你解决了跨浏览器的难题。

window.onload 事件和 jQuery ready 函数之间的主要区别是，前者除了要等待 DOM 被创建还要等到包括大型图片、音频、视频在内的所有外部资源都完全加载。如果加载图片和媒体内容花费了大量时间，用户就会感受到定义在 window.onload 事件上的代码在执行时有明显的延迟。

另一方面，jQuery ready() 函数只需对 DOM 树的等待，而无需对图像或外部资源加载的等待，从而执行起来更快。使用 jQuery $(document).ready() 的另一个优势是你可以在网页里多次使用它，浏览器会按它们在 HTML 页面里出现的顺序执行它们，相反对于 onload 技术而言，只能在单一函数里使用。鉴于这个好处，用 jQuery ready() 函数比用 window.onload 事件要更好些。