码迷,mamicode.com
首页 > Windows程序 > 详细

js中window.onload 与 jquery中$(document.ready()) 测试

时间:2015-07-17 18:45:23      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:javascript   jquery   

js中window.onload 与 jquery中$(document.ready())区别,验证代码如下(调换js代码和Jquer代码书写顺序测试,运行结果一样,因此与代码书写位置没关系):
<html>
<head>
<script type='text/javascript' src='jquery-1.11.1.min.js'></script>
<script type='text/javascript'>
    $(document).ready(function(){
		var myDate = new Date();
		var hours=myDate.getHours();       //获取当前小时数(0-23)
		var minutes=myDate.getMinutes();     //获取当前分钟数(0-59)
		var seconds=myDate.getSeconds();     //获取当前秒数(0-59)
		var milliseconds=myDate.getMilliseconds();    //获取当前毫秒数(0-999)
		
		console.log("【$(document).ready()】当前时间:"+hours+"时"+minutes+"分"+seconds+"秒"+milliseconds+"毫秒");
		console.log("【$(document).ready()】先加载DOM结构,再执行当前JS,后加载大型图片及内容");
    });
  
   //***************
   window.onload=function(){ 
	    var myDate = new Date();
		var hours=myDate.getHours();       //获取当前小时数(0-23)
		var minutes=myDate.getMinutes();     //获取当前分钟数(0-59)
		var seconds=myDate.getSeconds();     //获取当前秒数(0-59)
		var milliseconds=myDate.getMilliseconds();    //获取当前毫秒数(0-999)
	
		console.log("【window.onload】当前时间:"+hours+"时"+minutes+"分"+seconds+"秒"+milliseconds+"毫秒");
	    console.log("【window.onload】先加载DOM结构,后加载大型图片及内容,再执行当前JS");
	}
   //***************
</script>
</head>
<body>
	<pre>
		说明:$(document).ready()是在DOM结构载入完后执行的,而window.onload是得在所有文件都加载完后执行的;
		注意区别,一个是DOM加载完,一个是所有文件加载完。

		所谓DOM加载完,就是指DOM模型加载完,也就是指代码加载完。
		两者最大的区别,就是DOM加载完之后,不必再去等相应的图片加载完就可以执行JS代码了。
	</pre>
	<img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/>
	<img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/>
	<img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/>
	<img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/>
	<img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/>
	<img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/>
	<img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/>
	<img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/>
	<img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/>
	<img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/>
	<img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/>
	</body>
</html>


运行截图:

技术分享


总结:

$(document).ready()是在DOM结构载入完后执行的,而window.onload是得在所有文件都加载完后执行的;
所谓DOM加载完,就是指DOM模型加载完,也就是指代码加载完。两者最大的区别,就是DOM加载完之后,不必再去等相应的图片加载完就可以执行JS代码了。

版权声明:本文为博主原创文章,未经博主允许不得转载。

js中window.onload 与 jquery中$(document.ready()) 测试

标签:javascript   jquery   

原文地址:http://blog.csdn.net/user_longling/article/details/46930563

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!