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. 用list去初始化numpy的array数组 numpy的array和python中自带的list之间相互转化

    http://blog.csdn.net/baiyu9821179/article/details/53365476 a=([3.234,34,3.777,6.33]) a为python的list类型 ...

  2. 从postgres数据库逆向生成hibernate实体类

    最近整理 一个项目,原先的项目是用的oracle,然而新的项目要用postgresql.将oracle数据库导出之后,通过powerdesigner整理,导出postgresql的脚本,然后在post ...

  3. Springboot 配置文件与对象之间进行映射之@ConfigurationProperties

    一.将配置文件与实体类绑定1.1.将yaml配置文件的属性映射到Javabean中1.1.1.yaml配置文件注意:键值对的语法,键:之后必须要有空格 1.1.2.Javabean 定义注意:java ...

  4. 第4节 hive调优：动态分区调整问题

    执行如下截图中的语句时卡住了: 原因:yarn未启动,hive底层是要提交mapreduce到yarn上才能计算结果的. 之前启动yarn时,未执行jps查看是否已经启动.其实未启动成功: [root ...

  5. ASP.NetCore 错误 NU1605 检测到包降级: Microsoft.Data.Sqlite 从 2.2.1 降级到 2.1.0

    找到使用的.csproj文件 将 <PackageReference Include="Microsoft.Data.Sqlite" Version="2.1.0& ...

  6. 23. STATISTICS

    23. STATISTICS STATISTICS表提供有关表索引的信息. STATISTICS表有以下列: TABLE_CATALOG:包含索引的表所属的目录的名称.该值始终为def. TABLE_ ...

  7. playbacktask

    / ** 播放应用程序的头文件. 此文件是头文件,用于定义Playback应用程序的API和数据类型. @file PlaybackTsk.h @ingroup mIAPPPlay @note什么都没 ...

  8. static静态方法的优缺点

    static可以修饰成员变量,成员方法,代码块,类特点: static修饰的方法和变量,为类所属方法和变量,不会在对象销毁时销毁,所以生命周期较长.被static修饰的内容会随着类的加载而加载,优先于 ...

  9. pispice中pispice文件夹下模型的描述

    VPULSE: 利用PSpice进行仿真时,用VPULSE产生方波,VPULSE在SOURSE库中,有七个参数: V1:低电平,如-5V: V2:高电平,如+5V: TD:第一个脉冲相对于0时刻的延迟 ...

  10. xtu summer individual 1 D - Round Numbers

    D - Round Numbers Time Limit:2000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u D ...