探讨 Jquery ready和Dom onload的区别

发布时间:2020-06-17编辑:脚本学堂
有关jquery ready与dom onload的用法区别,你了解有多少呢?本文通过一个例子,与大家一起探讨二者的区别。

在页面加载前显示广告提示,即dom还没有加载先显示广告,当页面所有资源加载完后在隐藏广告,显示dom内容。window onload包含dom load。
 
页面响应加载的顺序:
域名解析->加载html->加载js和css->加载图片等其他信息,jquery的Dom Ready方法在加载图片等其他信息前就可以操作Dom了,先于window.onload事件触发前执行。
 
Jquery的ready和Dom的onload的区别:
1,onload是所有dom元素创建完毕,图片、css等都加在加载完毕后才触发
2,ready则是dom元素创建完毕后就被触发
相对来说jquery的ready可以提高网页的响应速度:

例子:
 

复制代码 代码示例:
<html>  
<head>  
<TITLE>Jquery ready和Dom onload的区别--www.jb200.com</TITLE> 
<script type="text/javascript" src="jquery-1.4.4.js"></script> 
<script language=javaScript>  
window.onload = function(){ 
    alert(1); 
}
$(function(){ 
    alert("jquery ready function 1"); 
});
function init(){ 
    alert(2); 
}
</script>  
<body onload="init()">  
dafdfad 
</body>  
</html>

js代码:
 

复制代码 代码示例:
<script language=javaScript>  
window.onload = function(){ 
    alert(3); 

 
$(function(){ 
    alert("jquery ready function 2"); 
}); 
</script> 
 

  
弹出顺序为:
1、jquery ready function 1
2、jquery ready function 2
3、3

说明:
1、jquery的ready方法可以执行多次(按顺序执行)
2、window.onload不允许多次加载,若出现多次,则加载最后一个。
第一次加载window.onload方法,第二次加载<body onload>方法,最后加载html最后的onload方法。

有关Jquery ready和Dom onload的区别,就介绍这些了,希望对大家有所帮助。