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>

执行截图：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

总结：

$(document).ready()是在DOM结构载入完后运行的，而window.onload是得在全部文件都载入完后运行的；

所谓DOM载入完，就是指DOM模型载入完，也就是指代码载入完。两者最大的差别。就是DOM载入完之后，不必再去等对应的图片载入完就能够运行JS代码了。

js中window.onload 与 jquery中$(document.ready()) 測试的更多相关文章

  1. JS的window.onload与JQuery的$(document).ready(function(){})的区别

    前段时间去面试被问及JS的加载(onload)与jQuery中加载(ready)方法的区别,瞬时懵逼了,关于这个知识点平时还真没怎么注意. 最近先来无事便查了一下资料, onload 事件(W3c上给 ...

  2. JS中的onload与jQuery中的ready差别

    jQuery的运行机制(onload与ready的差别) 结论得出前自行測试: 为了測试是否真如所说的那样,所以在页面插入了20000张照片,照片数量少得不出什么结论,所以改用console.log( ...

  3. window.onload、DOMContentLoaded和$(document).ready()

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  4. jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详细讲解

    1.(function($) {…})(jQuery); 1).原理: 这实际上是匿名函数,如下: function(arg){…} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写 ...

  5. jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详细讲解 ----转载

    1.(function($) {-})(jQuery); 1).原理: 这实际上是匿名函数,如下: function(arg){-} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写 ...

  6. jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详解

    1.(function($) {…})(jQuery); 1).原理: 这实际上是匿名函数,如下: function(arg){…} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写 ...

  7. jq中$(function(){})和js中window.onload区别

    先看下执行代码: $(function(){   console.log("jq");}) $(function(){   console.log("jq1") ...

  8. jquery的$(document).ready()与js的window.onload区别

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  9. javascript的window.onload()方法和jQuery的$(document).ready()的对比

    jQuery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 windo ...

随机推荐

  1. c++ vector容器遍历方式

    #include <vector> #include <iostream> class Test { public: int a; int b; int c; Test() { ...

  2. Java垃圾回收之老年代垃圾收集器

    1.Serial Old 收集器(-XX: +UseSerialOldGC, 标记-整理算法) 1.1 单线程收集,进行垃圾收集时,必须暂停所有工作线程 1.2 简单高效,Client模式下默认的老年 ...

  3. Java编程：常见问题汇总

    每天在写Java程序,其实里面有一些细节大家可能没怎么注意,这不,有人总结了一个我们编程中常见的问题.虽然一般没有什么大问题,但是最好别这样做. AD: 每天在写Java程序,其实里面有一些细节大家可 ...

  4. iOS之绘制像素到屏幕

    译注:这篇文章虽然比较长,但是里面的内容还是很有价值的. 像素是如何绘制到屏幕上面的?把数据输出到屏幕的方法有很多,通过调用很多不同的framework和不同的函数.这里我们讲一下这个过程背后的东西. ...

  5. js 将页面保存为图片

    <!DOCTYPE html><html><head><title>保存为images</title><meta charset=&q ...

  6. Oracle数据库的基本使用

    1.Linux安装  (略) 2.Oracle数据库监听命令: 监听状态:$lsnrctl status 启动监听:$lsnrctl start 关闭监听:$lsnrctl  stop 重载监听:$l ...

  7. Mysql中max函数取得的值不是最大

    ①问题:遇到一个很有意思的问题,这里记录一下, 就是在使用max函数的时候发现取得的最大值其实不是最大值. 比如: 某一列中有10000000,和9999999, 其最大值应该是10000000但是查 ...

  8. 如何用纯 CSS 创作条形图，不用任何图表库

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. 在线演示 https://codepen.io/zhang-ou/pen/XqzGLp 可交互视频教 ...

  9. 关于Kubernetes v1.14.0的 kube-controller-manager部署

    1. kube-controller-manager准备 默认kube-controller-manager 部署在kube-apiserver部署的服务器上面服务器的配置等在这就不在列出来 二进制文 ...

  10. Specified VM install not found: type Standard VM, name JDK1.8

    真正的问题解决方法在这里:在项目中,右键点击ant文件,选择Run As -- External Tools Configuration,在这个页面的顶端就会看到有红叉叉的报错,报错信息就是Speci ...