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

区别: window.onload与 $(document).ready()

* window.onload

* 包括页面的图片加载完后才会回调(晚)

* 只能有一个监听回调，就是说写多个的时候前一个会被覆盖

* $(document).ready()

* 等同于: $(function(){})

* 页面加载完就回调(早)

* 可以有多个监听回调，多个回调都会调用

示例：

<!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">
 
<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 加载完成后打印宽度
   */

  // 1. 直接打印img的宽度，观察其值
  console.log('直接', $('#logo').width())
  
  window.onload = function () {
    console.log('onload', $('#logo').width())
  }
  window.onload = function () {
    console.log('onload2', $('#logo').width())
  }
  
  $(function () {
    console.log('ready', $('#logo').width())
  })
  $(function () {
    console.log('ready2', $('#logo').width())
  })
  
  $('#logo').on('load', function () {
    console.log('img load', $(this).width())
  })

  /*$(document).ready(function () {

  })*/
  
</script>
</body>
</html>