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

js中window.onload 与 jquery中$(document.ready()) 测试相关推荐

jquery (js中window.onload与jquery中$(document.ready())的区别)
jquery 学习之一(js中window.onload与jquery中$(document.ready())的区别) 耳听为虚,眼见为实.通过下面的实例可查看两者的异同(注意:aa.jpg最好是一张 ...
【js的window.onload和jquery的.ready()什么区别】
JavaScript中的window.onload和jQuery中的.ready()都是页面加载完成后执行的事件处理函数,用于在页面加载完成后执行一些JavaScript代码.它们之间的主要区别如下: ...
jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详细讲解
1.(function($) {-})(jQuery); 1).原理: 这实际上是匿名函数,如下: function(arg){-} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写 ...
JS中window.onload事件详解
window.onload出现的原因? 我们都知道页面的代码顺序是从上往下进行加载,很多时候我们要对页面中的某一个模块进行操作,这时候我们常常使用javascript代码来进行操作.为了能够保证操作 ...
关于JS的window.onload与$(function (){})方法区别
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. $(function (){})==$(document).ready()是DOM结构绘制完毕后就执行,不必等到 ...
JQuery的$(document).ready(function(){})与JS的window.onload 的各自优势！
由于项目需要,使用JQuery也有相当一段时间了.由于经常要处理DOM节点加载.图片显示以及动态资源请求,所以对$(document).ready(function(){})理解也越来越深了,所有在此 ...
jQuery的$(document).ready()和JavaScript onload事件
对元素的操作和事件的绑定需要等待一个合适的时机,可以看下面的例子: <!DOCTYPE html> <metacharset="utf-8"> <ht ...
关于js中window.location.href,location.href,parent.location.href,top.location.href的使用方法
关于js中"window.location.href"."location.href"."parent.location.href".&qu ...
js中WINDOW对象中的location成员对象
js中DOM, DOCUMENT, BOM, WINDOW 区别全栈工程师开发手册 (作者:栾鹏) js系列教程6-BOM操作全解 js中WINDOW对象中的location成员对象 locatio ...

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

js中window.onload 与 jquery中$(document.ready()) 测试相关推荐

最新文章

热门文章