原生js中实现页面加载完成后，执行JS的5种方式的顺序

最新推荐文章于 2023-04-08 11:56:46 发布

慢吞吞的树懒

最新推荐文章于 2023-04-08 11:56:46 发布

阅读量1.7k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44824839/article/details/109515559

版权

页面加载完成后执行js的5种方式
1,2本质上没啥区别,1是2的简写方式。都是document加载完后就执行
1：jQuery的 $function (){}) 2：jQuery的$ (document).ready(function (){})
3：使用jQuery对象,4使用dom对象。都是等整个window加载完后就执行
3：jQuery的 $window).load(function (){}) 4：window.onload = function (){} 在标签上绑定onload事件。等待body加载完后就执行 5：<body οnlοad="executeAfterloadedBody()"> 重点：第3,4种必须等到页面内包括图片的所有元素加载完毕后才能执行，而第1,2种是dom结构绘制完毕后就执行，不必等待加载完毕。 window.onload不能同时编写多个，如果有也只会执行一个，$ (document).ready()则可以同时编写多个，并且都可以得到执行。
这5种方式，执行的先后顺序：
1, $function(){});和 2,$ (document).ready(function(){}); 无论位置放置在哪里，总是优先其余三种方式（原因是：这两种方式是在document加载完成后就执行，后三种是等到整个window页面加载完成后才执行），这两者之间的执行顺序是谁在上方谁优先执行。
3,$(window).load(function(){});和4,window.onload = function(){} 这两种方式，总是优先于<body οnlοad=“executeAfterloadedBody()”>执行。他们两者执行顺序也是根据谁在上方谁先执行。
5,<body οnlοad=“executeAfterloadedBody()”>总是最后执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试页面加载完成后执行JS的5种方式的顺序</title>
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type='text/javascript'>
  window.onload = function () {
    console.log("window_html loaded====》onload");
  }

  $(window).load(function () {
    console.log("jquery===》window_html loaded");
  })

  $(document).ready(function () {
    console.log("jquery====》document loaded");
  });

  $(function () {
    console.log("jquery====》document onload");
  });

  function executeAfterloadedBody() {
    console.log("====》onload");
  }

</script>
<body οnlοad="executeAfterloadedBody()"></body>
</html>

结果：
在这里插入图片描述
大概意思： $window).load(function(){})在高版本中已经废弃，请用：$ (window).on(‘load’,function(){});替代修改后，重新允许：

在这里插入图片描述

慢吞吞的树懒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js中实现页面加载完成后，执行JS的5种方式的顺序

页面加载完成后执行js的5种方式1,2本质上没啥区别,1是2的简写方式。都是document加载完后就执行1：jQuery的(function())2：jQuery的(function (){}) 2：jQuery的(function())2：jQuery的(document).ready(function (){})3：使用jQuery对象,4使用dom对象。都是等整个window加载完后就执行3：jQuery的(window).load(function())4：window.onload=
复制链接

扫一扫