ready onload区别

作者: Ordinary_zz | 来源:发表于2021-07-22 11:06 被阅读0次

js : RegExp
ready onload区别
jQuery
web端笔记1
document.ready和window.onload的区别
Jquery中的一些区别
onload 与 ready 区别
7-window.onload&&$(document).rea
jQuery动画与ajax
Jquery常用方法

第一版理解笔记:

首先理解这两个代表的是什么意思：
ready：表示文档结构已加载完成（不包含图片等非文字媒体文件）
onload：表示页面包含图片等文件在内的所有元素都加载完成
即先ready后onload

参考链接：https://segmentfault.com/a/1190000008933191

image

更新（了解根本原因）：

首先要了解documet.readyState(document的加载状态)
该属性的变化会触发document.readyStateChange事件

存在三种状态：

loading：document仍在加载中
interactive: 文档已解析完成（不包括图片、css等资源）-> （DOMContentLoaded事件即将被触发）
complete：文档和所有资源完成加载（load事件即将触发）

document.onreadystatechange = function() {
      console.log(document.readyState)
       if (document.readyState === 'complete') {
           console.log('初始化DOM  加载解析完成')
       }
    }

DOMContentLoaded事件

tips: jquery将DOMContentLoaded事件封装为ready事件

document.addEventListener('DOMContentLoaded', (event) => {
    console.log('DOM完全加载以及解析'); // 但不包括css  图片等资源
});

load事件

// 监听方法1：
window.addEventListener('load', (event) => {
  console.log('page is fully loaded');
});
// 监听方法2：
window.onload = (event) => {
  console.log('page is fully loaded');
};

观察页面整体加载顺序

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面加载执行顺序</title>
  <script>
    document.addEventListener('DOMContentLoaded', function(event) {
      console.log('DOMContentLoaded:' + '初始化DOM加载并解析')
    })
    window.addEventListener('load', function(event) {
      console.log('load:' + 'window 所有资源加载完成')
    })
    document.onreadystatechange = function() {
      console.log('readyState:' + document.readyState)
    }
    
    window.addEventListener('beforeunload', function(event) {
      console.log('即将关闭')
      event.returnValue = "\o"
    })
    window.addEventListener('unload', function(event) {
      console.log('即将关闭1')
    })
</script>
</head>
<body>
  <div>
    测试中
  </div>
</body>
</html>

// 打印顺序结果为：
// readyState:interactive
// DOMContentLoaded:初始化DOM加载并解析
// readyState:complete
// load:window 所有资源加载完成

// 点击关闭页面时的打印顺序：
// 打印出   即将关闭 —> 页面弹出是否确认离开 -> 确认 -> 即将关闭1