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对象。对象