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

• window.onload
  • 包括页面的图片加载完后才会回调 (晚)
  • 只能有一个监听回调
• $(document).ready()
  • 等同于: $(function(){})
  • 页面加载完就回调 (早)
  • 可以有多个监听回调

<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>