js中window.onload與jquery中$(document.ready())的區別

時間 2020-09-14

標籤 window.onload window onload jquery document.ready document ready 區別欄目 JavaScript 简体版

原文原文鏈接

$(document).ready()是在DOM結構載入完後執行的，而window.onload是得在全部文件都加載完後執行的，注意區別，一個是DOM加載完，一個是全部文件加載完javascript

耳聽爲虛,眼見爲實。經過下面的實例可查看二者的異同（注意：aa.jpg最好是一張大容量圖片）
<html>
<head>
<script type='text/javascript' src='jquery-1.3.2.min.js'></script>
<script type='text/javascript'>
    $(document).ready(function(){
        alert("先加載DOM結構,再彈出對話框,後加載大型圖片及內容");
    });

   //***************
   //window.onload=function(){ alert("先加載DOM結構,後加載大型圖片及內容,再彈出對話框");}
   //***************
</script>
</head>
<body>
<p>大量內容</p>
<img src='aa.jpg'/>
</body>
</html>css

說明：$(document).ready()是在DOM結構載入完後執行的，而window.onload是得在全部文件都加載完後執行的，注意區別，一個是DOM加載完，一個是全部文件加載完html

所謂DOM加載完，就是指DOM模型加載完，也就是指代碼加載完。
二者最大的區別，就是DOM加載完以後，沒必要再去等相應的圖片加載完就能夠執行JS代碼了。java

補充：(二者的具體用法)
window.onload用法
<script type='text/javascript'>
function winready(){
document.getElementById.('load').style.display='none';
}
window.onload=winready; //或者window.onload=function(){winready();}
</scritp>jquery

jquery用法:
<script type='text/javascript'>
    $(document).ready(function(){
        $('#load').css('display','none');
    })
</script>spa

jQuery(function(){}); = jQuery(docunemt).ready(function(){}); 意義爲在DOM加載完畢後執行ready()方法
htm

(funtion(){})(jQuery);實際執行()(para)匿名方法，只不過傳遞了jQuery對象。對象