window.onload与$(document).ready()

J-April

于 2021-06-24 19:34:53 发布

阅读量189

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_47016497/article/details/118195013

jQuery 专栏收录该内容

29 篇文章

订阅专栏

本文探讨了JavaScript中window.onload和jQuery的$(document).ready()的区别。window.onload等待整个页面包括图片加载完毕才执行回调，而$(document).ready()在DOM准备就绪时即触发，不等待资源加载。文章通过示例展示了它们的执行顺序，包括多个回调的处理，并演示了在img元素加载完成后的打印操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>window.onload与$(document).ready()</title>
</head>
<body>
<h1>测试window.onload与$(document).ready()</h1>
<img id="logo" src="https://gss0.bdstatic.com/5bVWsj_p_tVS5dKfpU_Y_D3/res/r/image/2017-05-19/6fec71d56242b74eb24b4ac80b817eac.png">

<!--
区别: window.onload与 $(document).ready()
  * window.onload
    * 包括页面的图片加载完后才会回调(晚)
    * 只能有一个监听回调
  * $(document).ready()
    * 等同于: $(function(){})
    * 页面加载完就回调(早)
    * 可以有多个监听回调
-->
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript">
  /*
   需求：
   1. 直接打印img的宽度，观察其值
   2. 在 $(function(){}) 中 打印 img 的宽度
   3. 在 window.onload 中打印宽度
   4. 在 img 加载完成后打印宽度
   */
  var $logo = $('#logo')
  console.log($logo.width()) // 0
  $(function () {
    console.log('$1()', $logo.width())
  })
  $(function () {
    console.log('$2()', $logo.width())
  })

  window.onload = function () {
    console.log('onload1()')
  }
  window.onload = function () {
    console.log('onload2()', $logo.width())
  }

  $logo.on('load', function () {
    console.log('load', this.width)
  })
</script>
</body>
</html>