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

2017-03-08 1310 7 編輯:深圳網站建設 來源:互聯網

document.ready和onload的區別——JavaScript文檔加載完成事件

頁面加載完成有兩種事件:

一是ready,表示文檔結構已經加載完成(不包含圖片等非文字媒體文件);

二是onload,指示頁面包含圖片等文件在內的所有元素都加載完成。

document.ready和onload的區別——JavaScript文檔加載.jpg

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了。

3.用個最常用的例子說明Dom Ready和Dom Load兩者的區別

Dom Ready是在dom加載完成后就可以直接對dom進行操作,比如一張圖片只要<img>標簽完成,不用等這個圖片加載完成,就可以設置圖片的寬高的屬性或樣式等;

Dom Load是在整個document文檔(包括了加載圖片等其他信息)加載完成后就可以直接對dom進行操作,比如一張圖片要等這個圖標加載完成之后才能設置圖片的寬高的屬性或樣式等;

比如一個圖片瀏覽的效果,通常如果圖片尺寸很大的情況下,為了防止圖片把頁面撐開通常會限定圖片的寬度或高度,如果是單張圖片或者是多張規格比例統一的圖片下我們可以直接在<img>上加個寬度或者高度的屬性<img src=“img.jpg” alt=”碼頭的大照片” width=“100” height=“90”>,或者可以在css樣式中加寬度或者高度的屬性(推薦)。但是如果這些張規格比例不統一的圖片要瀏覽呢?那就有問題,你設置寬高很可能造成圖片嚴重失真。在ie6之后ie7,ie8還有其他主流瀏覽器支持css2.1中min-width,max-width,min-height,max-width,這樣我們就可以用min-width,max-width,min-height,max-width解決這些問題,但是ie6除非是拋棄性能問題用css表達式。這個時候ie的最好解決方案就是用Dom Ready而不是Dom Load,因為通常大圖片加載的時候會一點一點的加載,這個在尺寸大,字節多,網速慢的時候表現的非常明顯,用Dom Load,通常是先把頁面撐開,加載完成后再把圖片重設寬高,圖片加載多少時間,這個頁面就會撐開多久,用戶會非常難受!!

專業的網站建設公司,深正互聯,如您有網站營銷需求,請您關注我們,或者致電13828884598

本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
七星彩头尾