document.ready 與 onload 的區別
阿新 • • 發佈：2018-04-20
加載完成 fun define def china 標簽 區別 func 前端工程
摘要
document.ready 是指文檔加載好, dom 加載好，僅包含在它之前的 script 、css 標簽 ， 但不包含 img 標簽是否加載完成， 因為頁面是按順序執行的。
onload 是指頁面完全加載好，包括所有節點，甚至 img 標簽
當然我們編碼一般都是把基礎庫放在head 頭部，保證最先加載，業務代碼放在最後，避免出現庫未加載完成的情況。
當然現在前端工程一般使用 webpack 等打包技術，在編譯打包過程中就完全實現了依賴項前置的功能。
測試
<!DOCTYPE html> <html> <head> <title></title> </head> <body onload="onload()"> <img src="http://upload.chinaz.com/upimg/allimg/110630/0901070.jpg" /> <script type="text/javascript" src="http://libs.cdnjs.net/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { console.log('document ready'); }); </script> <script type="text/javascript"> console.log('haha'); </script> </body> <script type="text/javascript"> function onload() { console.log('onload'); } </script> </html> // 打印 //haha //document ready //onload
<!DOCTYPE html> <html> <head> <title></title> </head> <body onload="onload()"> <img src="http://upload.chinaz.com/upimg/allimg/110630/0901070.jpg" /> <script type="text/javascript"> $(document).ready(function() { console.log('document ready'); }); </script> <script type="text/javascript"> console.log('haha'); </script> <script type="text/javascript" src="http://libs.cdnjs.net/jquery/3.2.1/jquery.min.js"></script> </body> <script type="text/javascript"> function onload() { console.log('onload'); } </script> </html> //打印 //$ undefined //haha //onload
<!DOCTYPE html> <html> <head> <title></title> </head> <body onload="onload()"> <img src="http://upload.chinaz.com/upimg/allimg/110630/0901070.jpg" /> <script type="text/javascript"> console.log('haha'); </script> <script type="text/javascript"> $(document).ready(function() { console.log('document ready'); }); </script> <script type="text/javascript" src="http://libs.cdnjs.net/jquery/3.2.1/jquery.min.js"></script> </body> <script type="text/javascript"> function onload() { console.log('onload'); } </script> </html> //打印 //haha //$ undefined //onload
document.ready 與 onload 的區別