您的位置：首页 > Web前端 > JQuery

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

2015-07-17 17:49 615 查看

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代码了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航