window.onload和document.ready
阿新 • • 發佈:2018-07-17
一次 同時 完成 ava 執行 簡化 dom spa span
瀏覽器解析大致有以下幾個步驟:
(1) 解析HTML結構
(2) 加載外部腳本和樣式
(3) 解析並執行腳本代碼
(4) 構造HTML DOM 模型
(5) 加載圖片等外部文件
(6) 界面加載完成
window.onload會在頁面所有內容加載完成之後執行(第6步之後),比如圖片等對媒體文件。如果媒體文件較多,即時網頁文檔已經顯示,但load事件不會觸發。
document.ready會在DOM繪制完畢後執行(第4步之後),能確保文檔呈現和腳本初始化同時完成。
window.onload只能寫一次,而document.ready可以寫多次。
1 <script type="text/javascript"> 2 //只會顯示load2 3 window.onload=function () { 4 alert("load1") 5 } 6 window.onload=function () { 7 alert("load2") 8 } 9 </script>
1 <script type="text/javascript"> 2 //都會執行 3 $(document).ready(function() { 4 alert("ready1") 5 }) 6 $(document).ready(function () { 7 alert("ready2") 8 }) 9 //簡化形式 10 $(function () { 11 alert("ready3") 12 }) 13 </script>
window.onload和document.ready