Jquery的ready和Dom的onload的区别

原创 2013年12月04日 10:17:19

在开发中遇到问题,需要在页面加载前显示广告提示。也就是在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>class_obj_js_class</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>

<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方法

JS中的onload与jQuery中的ready区别

JS中的onload与jQuery中的ready区别介绍
  • huangyibin628
  • huangyibin628
  • 2014年05月09日 11:23
  • 1864

JQuery-- onload,ready方法详细解说

页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页 面包含图片等文件在内的所有元素都加载完成。(可以说:ready 在onload...
  • dreamzml
  • dreamzml
  • 2013年04月27日 15:19
  • 23562

JS中的onload与jQuery中的ready区别

jQuery的执行机制(onload与ready的区别) 结论得出前自行测试: 为了测试是否真如所说的那样,所以在页面插入了20000张照片,照片数量少得不出什么结论,所以改用con...
  • u010476231
  • u010476231
  • 2014年05月11日 19:34
  • 368

onload与ready方法的区别

Jquery中$(document).ready()和window.onload的区别 $(document).ready()和window.onload在表单上看都是页面加载时我们...
  • NARUTO_LUOLUO
  • NARUTO_LUOLUO
  • 2016年04月29日 16:36
  • 819

JQ中的document.ready必须有么

JQ中的document.ready必须有么第一点: 你好,$().ready作用于所有html的dom元素加载完毕之后,尤其是动态的html,在不确定html文档是否加载完成的情况下,需要使用,如果...
  • qq_26291823
  • qq_26291823
  • 2016年09月18日 13:33
  • 902

dom对象和jquery对象的区别

在开发前台页面的时候,如果要想把页面做的交互性高一些,需要写大量的js代码和css样式.        在js中,获取对象,可以通过 document.getElementById 或 docum...
  • zc474235918
  • zc474235918
  • 2015年12月20日 08:14
  • 1323

jQuery对象与DOM对象的区别

jQuery对象与DOM对象 1:对于才开始接触jQuery库的初学者,我们需要清楚认识一点: jQuery对象与DOM对象是不一样的 2:可能一时半会分不清楚哪些是jQuery对象,哪些是...
  • qq_18832439
  • qq_18832439
  • 2016年04月23日 20:18
  • 672

页面的onload和ready问题总结

一,页面加载过程          从输入url到页面显示出来的过程中发生了哪些事情n...
  • lkl713
  • lkl713
  • 2014年05月09日 15:28
  • 1092

jQuery中document的ready和load事件的区别?

概述: 大家在工作中用jQuery的时候一定会在使用之前这样: 1 2 3 4 5 6 7 8 //document ready $(document).r...
  • qq_14849723
  • qq_14849723
  • 2014年12月18日 11:26
  • 1465

js与jQuery的DOM操作比较(一)

js与jQuery的DOM操作比较(一) 最近才开始学jQuery,它的代码简单,操作起来方便,jQuery库的功能特别强大。jQuery作为一种JavaScript库,继承并优化了JavaScri...
  • h_cjj
  • h_cjj
  • 2016年04月16日 15:56
  • 832
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jquery的ready和Dom的onload的区别
举报原因:
原因补充:

(最多只允许输入30个字)