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. python爬虫---实现项目(一) Requests爬取HTML信息

    上面的博客把基本的HTML解析库已经说完了,这次我们来给予几个实战的项目. 这次主要用Requests库+正则表达式来解析HTML. 项目一:爬取猫眼电影TOP100信息 代码地址:https://g ...

  2. Linux-fuser

    Linux-fuser 1. 描述 2. 选项3. EXAMPLES4. RESTRICTIONS 限制5. SIGNAL 可用信号 fuser - 使用文件或套接字识别进程 1. 描述 fuser使 ...

  3. Java开发者写SQL时常犯的10个错误

        首页 所有文章 资讯 Web 架构 基础技术 书籍 教程 我要投稿 更多频道 » - 导航条 - 首页 所有文章 资讯 Web 架构 基础技术 书籍 教程 我要投稿 更多频道 » - iOS ...

  4. iOS开发基础知识

    1:App跳转至系统Settings 跳转在IOS8以上跟以下是有区别的,如果是IOS8以上可以如下设置: NSURL *url = [NSURL URLWithString:UIApplicatio ...

  5. RN传参的问题

    RN父组件通过props属性给子组件传参,假设参数 target={target} 子组件在render函数里 let { target } = this.props; 如果子组件有个 FlatLis ...

  6. 【讲●解】KMP算法

    KMP算法 我们小组负责讲这个... 术语与规定 为了待会方便,所以不得不做一些看起来很拖沓的术语,但这些规定能让我们更好地理解\(KMP\)甚至\(AC\)自动机. 字符串匹配形式化定义如下: 假设 ...

  7. STL源码分析与实现-stl_list容器

    1. stl_list 介绍 今天我们来总结一下stl_List, 通过之前介绍单链表的文章,其实对链表的基本操作已经十分熟悉了,那对于stl_list,无非就是链表结构不一样,至于其中的增删改查的细 ...

  8. python的2种字符串格式化输出

    字符串格式化代码(typecode) 法一: %格式使用下面的格式 %[(name)] [flags] [width][.precision] typecode (name)输出字典的value使用, ...

  9. 条款21：必须返回对象时，别妄想返回其reference(Don't try to return a reference when you must return an object)

    NOTE: 1.绝不要返回pointer或reference 指向一个local stack 对象,或返回reference 指向一个heap-allocated对象,或返回pointer 或refe ...

  10. 小白菜OJ 1122 公牛母牛配（最大二分图匹配模板）

    题意: n只公牛和m只母牛,某些公牛和某些母牛互相喜欢.但最后一只公牛只能和一只母牛建立一对一匹配.要使得最后牛群匹配对数最大. 链接: http://caioj.cn/problem.php?id= ...