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