本文对比了window.onload和jQuery的$(document).ready()在网页加载中的行为，强调了window.onload在图片加载完成后才执行且只能设置一个回调，而$(document).ready()则在文档准备就绪时即调用，支持多个回调。通过实例演示了两者执行顺序的不同。
区别: window.onload与 $(document).ready()
* window.onload
* 包括页面的图片加载完后才会回调(晚)
* 只能有一个监听回调，多次设置为赋值操作，只输出最后那个
* $(function(){})
* 全称:$(document).ready()
* 页面加载完就回调(早)
* 可以有多个监听回调，输出多个
<body>
<h1>测试window.onload与$(document).ready()</h1>
<img id="logo"
src="https://img.alicdn.com/imgextra/i1/O1CN014TkCNG1QlpX9GSZje_!!6000000002017-0-tps-750-291.jpg_Q90.jpg">
<!-- 只有网络图片好使，本地图片好像不好使。。 -->
<script src="js/jquery-1.10.1.js"> </script>
<script>
var $imgH = $('#logo')
console.log($imgH.height())
//没等页面代码执行完就执行了，此时获取的是0，如果不是0，清除浏览器缓存
//解决办法1：window.onload和$(function(){})
// 有等号 是赋值操作，只能指定一个回调函数，如果设置多个，就是覆盖操作，只输出最后的
window.onload = function () {
console.log('onload1:' + $imgH.height())
};
window.onload = function () {
console.log('onload2:' + $imgH.height())
};
// 解决办法2.JQ提供的加载函数
// 区别出来了，这个比上面那个先执行，可以指定多个回调函数,所以输出两次
$(function () {
console.log('onload3:' + $imgH.height())
})
$(function () {
console.log('onload4:' + $imgH.height())
})
// 楼上的全称叫 document.ready
// $(document).ready(function(){})
</script>
</body>输出：
317
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
