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

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.οnlοad=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代码了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值