JS 頁面載入觸發事件 document.ready和window.onload的區別
阿新 • • 發佈:2019-02-11
轉載於:https://www.cnblogs.com/feiyuhuo/p/5097385.html
document.ready和onload的區別——JavaScript文件載入完成事件
頁面載入完成有兩種事件:
一是ready,表示文件結構已經載入完成(不包含圖片等非文字媒體檔案);
二是onload,指示頁面包含圖片等檔案在內的所有元素都載入完成。
1、Dom Ready
使用jq時一般都是這麼開始寫指令碼的:
$(function(){ // do something });
例如:
$(function() { $("a").click(function() { alert("Hello world!"); }); })
這個例子就是給所有的a標籤綁定了一個click事件。即當所有連結被滑鼠單擊的時候,都執行 alert("Hello World!");
也就是說頁面載入時繫結,真正該觸發時觸發。
其實這個就是jq ready()的簡寫,它等價於:
$(document).ready(function(){ //do something }) //或者下面這個方法,jQuer的預設引數是:“document”; $().ready(function(){ //do something })
這個就是jq ready()的方法就是Dom Ready,他的作用或者意義就是:在DOM載入完成後就可以可以對DOM進行操作。
一般情況一個頁面響應載入的順序是,域名解析-載入html-載入js和css-載入圖片等其他資訊。
那麼Dom Ready應該在“載入js和css”和“載入圖片等其他資訊”之間,就可以操作Dom了。
2、Dom Load
用原生的js的時候我們通常用onload時間來做一些事情,比如:
window.onload=function(){ //do something } //或者經常用到的圖片 document.getElementById("imgID").onload=function(){ //do something }
這種就是Dom Load,他的作用或者意義就是:在document文件載入完成後就可以可以對DOM進行操作,document文件包括了載入圖片等其他資訊。
那麼Dom Load就是在頁面響應載入的順序中的“載入圖片等其他資訊”之後,就可以操作Dom了。
最後附上一段在所有DOM元素載入之前執行的jQuery程式碼。
<script type="text/javascript"> (function() { alert("DOM還沒載入哦!"); })(jQuery) </script>