qinyi素材网
当前位置: 首页 > WEB教程 > jquery实现函数在页面加载完成之后执行

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

  时间: 2021-10-27   阅读:1.38k
简要教程

使用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 事件要更好些。

上一篇: 下一篇: