document.ready和window.onload区别,顺带jQuery的ready方法

<!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>jQuery-v1.9.0</title>
  <script src="/html/commonjs/jQuery-v1.9.0.js"></script>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  
  <pre>
    ready和onload事件区别
      1、document.ready 事件在DOM结构绘制完成之后就会执行,这样能确保就算有大量的媒体文件没加载出来,JS代码一样可以执行。
      2、window.onload 事件必须等到网页中所有内容全部加载完毕之后才被执行。如果一个网页中有大量的图片的话,则就会出现这种情况:
        网页文档已经呈现出来,但由于网页数据还没有完全加载完毕,导致load事件不能够即时被触发。

    window.onload 和 jquery(document).ready(function() {})的区别:
      1、$(function(){}):在Dom节点创建完成后就执行,如果有多个定义则依次执行。
      2、window.onload:在页面所有资源加载完后执行,如果有多个定义则只执行最后一个。
      3、$(function(){})在window.onload前执行。

    通常一个页面加载的顺序是,域名解析——加载html——加载js和css——加载图片等其他信息。
      DOM文档加载的步骤:
        1.解析HTML结构
        2.加载外部脚本和样式表文件。
        3.解析并执行脚本代码。
        4.DOM树构建完成。会触发DOMContentLoaded -- ready
        5.加载图片等外部文件。
        6.页面加载完毕。会触发window.load
        
        IE6、IE7不支持DOMContentLoaded,但它支持onreadystatechange事件
  </pre>
  <img id="imgId" src="../html/img/小鲁班.png" alt="" srcset="">
</body>
<script>
  // document对象
  document.ready = function() {
    console.log(表示文档结构已经加载完成--不包含图片等非文字媒体文件)
  }

  // window对象
  window.onload = function() {
    console.log(表示页面包含图片等文件在内的所有元素都加载完成)
  }

  // 选择器 跟踪 图片的加载
  document.getElementById("imgId").onload = function(){
    console.log(图片加载完成)
  }

  // 三种jquery方式,其实是同一种方式
  $(document).ready(function() {
    console.log(jquery1: 表示文档结构已经加载完成--不包含图片等非文字媒体文件)
  })

  $().ready(function() {
    console.log(jquery2: 表示文档结构已经加载完成--不包含图片等非文字媒体文件)
  })

  $(function() {
    console.log(jquery3: 表示文档结构已经加载完成--不包含图片等非文字媒体文件)
  })

</script>

</html>

 

document.ready和window.onload区别,顺带jQuery的ready方法

上一篇:多线程与网络之JSON和XML数据的解析


下一篇:AcWing 2069. 网络分析