javascriptdocument load 和document ready的區別

頁面加載完成有兩種事件,一是ready , 表示文檔結構已經加載完成(貋圖片等非文字媒體文件),二是onload 指示頁面包含圖片等文件在內的全部元素都加載完成。
 
1.執行時間不一樣:
從字面的意思上理解,$(document).ready()就是文檔準備好了。也就是瀏覽器已經解析完整個html文檔,dom樹已經創建起來了,這時就能夠經過class屬性或者id屬性等等對dom進行操做等。而$(window).load()就是整個頁面已經加載完畢。與前者的區別是dom樹雖然已經創建起來了,但頁面不必定加載完畢,如一些大的圖片等,加載完成就須要必定的時間;可是頁面加載完畢後,dom確定也就創建起來了;可是有些文字或者圖片連接等須要在文檔加載完畢前,dom樹創建後就進行的,這時就要用到$(document).ready()了。

2.能夠被執行的次數不一樣:html

$(document).ready()能夠在JavaScript代碼中出現屢次,而且裏面的函數或者代碼均可以獲得執行;而$(window).load()只能在JavaScript代碼中出現一次,若是有多個$(window).load(),那麼只有最後一個$(window).load()裏面的函數或者代碼纔會執行,以前的$(window).load()都將被覆蓋;瀏覽器

3.執行的效率不一樣:
如要在dom的元素節點中添加onclick屬性節點,這時用$(document).ready()就要比用$(window).load()的效率高;可是在某些時候還必須得用$(window).load()才行,如以前寫的app下載,若是要關閉這個下載框,則必需要在整個下載框加載完畢後,才能點擊關閉圖標,對app下載框執行隱藏。app

<script>

$(document).ready(function(){
  $(".the_body a").attr("onclick","alert('test')");
});

$(window).load(function(){
   $(".close_btn").click(function(){
        $("#app_down").hide();
    });
});
</script>
 
 

<wiz_tmp_tag id="wiz-table-range-border" contenteditable="false" style="display: none;">dom



相關文章
相關標籤/搜索