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. nginx可用来干什么？

    1.静态HTTP服务器 首先,Nginx是一个HTTP服务器,可以将服务器上的静态文件(如HTML.图片)通过HTTP协议展现给客户端. 配置: server { listen80; # 端口号 lo ...

  2. B6. Concurrent 内存模型与线程交互

    [概述]

  3. EBS oracle 批量导入更新MOQ（最小拆分量、采购提前期、最小订购量、最小包装量）

    EXCEL的列:组织id,供应商编号,供应商地点,料号,最小拆分量.采购提前期.最小订购量.最小包装量 --采购导入更新MOQ四个值,若有为空的那列,会保留原来的值,不会去更新那列的值 PROCEDU ...

  4. tensorflow note

    #!/usr/bin/python # -*- coding: UTF- -*- # @date: // : # @name: first_tf_1223 # @author:vickey-wu fr ...

  5. kvm中内存过载使用

    与CPU过载使用类似,在KVM中内存也是允许过载使用(over commit)的,KVM能够让分配给客户机的内存总数大于实际可用的物理内存总数. 由于客户机操作系统及其上的应用程序并非一直100%地利 ...

  6. c++_分巧克力（75分）

    #include <iostream> using namespace std; int n,k; ],w[]; bool fen(int bian){ ; ;i<n;i++){ c ...

  7. 基于selenium爬取拉勾网职位信息

    1.selenium Selenium 本是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中,就像真正的用户在操作一样.而这一特性为爬虫开发提供了一个选择及方向,由于其本身依赖 ...

  8. Android布局之线性布局——LinearLayout

    本文将详细介绍线性布局的各种xml属性. xml属性 <?xml version="1.0" encoding="utf-8"?> <Line ...

  9. POJ 3169 Layout(差分约束 线性差分约束)

    题意: 有N头牛, 有以下关系: (1)A牛与B牛相距不能大于k (2)A牛与B牛相距不能小于k (3)第i+1头牛必须在第i头牛前面 给出若干对关系(1),(2) 求出第N头牛与第一头牛的最长可能距 ...

  10. 数据结构实验3：C++实现顺序栈类与链栈类

      实验3 3.1 实验目的 熟练掌握栈的顺序存储结构和链式存储结构. 熟练掌握栈的有关算法设计,并在顺序栈和链栈上实现. 根据具体给定的需求,合理设计并实现相关结构和算法.3.2实验要求3.2.1 ...