如何监听HTML页面加载？(Document加载的两种方式的区别)

Document加载的两种方式区别

监听HTML页面(不包括图片、样式)加载完成，也就是我们常说的DOMContentLoaded事件

• 判断ready的方法:

  • 监听document的onreadystatechange，判断readyState

      document.onreadystatechange = function () {
          if (document.readyState === 'complete') {
              console.log('html页面加载完成')
          }
      }
  

  • 监听document的ready事件

      document.ready = function () {
          console.log('html页面加载完成')
      }
  

  • 监听document的DOMContentLoaded事件

      document.addEventListener('DOMContentLoaded', function () {
          console.log('html页面加载完成')
      }
  

监听页面所依赖的所有资源全部加载完成，也就是我们常说的window.onload事件

+ 判断onload的方法
  - 监听window的onload事件

  - 监听document.body的onload事件