JS 頁面加載觸發事件 document.ready和window.onload的區別


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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM