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


頁面加載完成有兩種事件,一是ready,表示文檔結構已經加載完成(不包含圖片等非文字媒體文件),二是onload,指示頁 面包含圖片等文件在內的所有元素都加載完成。(可以說:ready 在onload 前加載!!!)

我的理解: 一般樣式控制的,比如圖片大小控制放在onload 里面加載;

              而:jS事件觸發的方法,可以在ready 里面加載;



用jQ的人很多人都是這么開始寫腳本的:
 
$(function(){
 
// do something
 
});
其實這個就是jq ready()的簡寫,他等價於:
 
$(document).ready(function(){
//do something
})
//或者下面這個方法,jQuer的默認參數是:“document”;
$().ready(function(){
//do something
})

 

 

-----------------------------------------------------------------------------------------------------------------------------------------------

$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法
接觸JQuery一般最先學到的是何時啟動事件。在曾經很長一段時間里,在頁面載入后引發的事件都被加載 在”Body”的Onload事件里.
對於Body的Onload事件和JQuery的Ready方法相比,有很多弊端.比如:
1.加載 多個函數的問題
<body onload="a();b();">
</body>
在Onload事件中 只能這樣加載,很丑陋…而在JQuery中你可以利用多個JQuery.Ready()方法,它們會按次序依次執行

2.代碼和內容不分離
  這個貌似不用說了,讓人深惡痛絕-.-!!

3.執行先后順序不同
  對於Body.Onload事件,是在加載完所有頁面內容才會觸發,我的意思是所有內容,包括圖片,flash等.如果頁面的這些內容很多會讓用戶等待很 長時間.
  而對於$(document).ready()方法,這個方法只是在頁面所有的DOM加載完畢后就會觸發,無疑很大的加快了網頁的速度.
  但是對於一些特殊應用,比如圖片的放大縮小,圖片的剪裁。需要網頁所有的內容加載完畢后才執行的呢?我推薦使用$(window).load()方法,這 個方法會等到頁面所有內容加載完畢后才會觸發,並且同時又沒有OnLoad事件的弊端.
  <script type="text/javascript">
        $(window).load(function() {
            alert("hello");
        });
        $(window).load(function() {
            alert("hello again");
        });
    </script>
  上面的代碼會在頁面所有內容加載完成后按先后順序依次執行.
  當然不要忘了與之對應的Unload方法
$(window).unload(function() {
            alert("good bye");
        });
上面代碼會在頁面關閉時引發.
在 所有DOM加載之前引發JS代碼
這個方法是我在調試的時候最喜歡的,有時候開發的時候也用這種方法
<body>
    <script type="text/javascript">
        (function() {
            alert("hi");
        })(jQuery)
    </script>
</body>
對, 就是利用js閉包的形式將js代碼嵌入body,這段代碼會自動執行,當然也可以直接嵌入js代碼,這種方式要注意順序問題,如下:
<body>
<div id="test">this is the content</div>
    <script type="text/javascript">

        alert($("#test").html());//I Can display the content
        
    </script>
</body>
<body>
   <script type="text/javascript">

        alert($("#test").html());//I Can't display the content
        
    </script>
    <div id="test">this is the content</div>
</body>
上面兩段代碼, 第二段代碼當中因為只能解釋到當前代碼之前的DOM,而test並不存在於已經解析的DOM數.所以第二段代碼無法正確顯示.

 

 

http://blog.csdn.net/kk5595/article/details/5713209


免責聲明!

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



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