说明（2017.4.2）：

1. 在body中放一个img标签，src链接一张图片，那么页面会先读取html的document文档，然后再读取外部资源（这里没加onload其实就是从上往下顺序读取）。

外部资源包括导入的js，css，图片，音乐，视频等等。

onload会将所有的资源包括外部资源全部加载完成。

而jquery的ready只要加载完dom树就完成了，里面的图片等资源有没有加载无所谓。

 <body>

     <img src="1.jpg">

 </body>

2. 如果img里面的src为空，就只读取了document。

3. 做一个测试，输出图片的宽高。

直接输出image的高宽，结果显示是0,0，当用image.onload的时候，显示了真实高宽，因为onload是等所有资源都加载完毕了。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <body>

 </body>

 <script type="text/javascript">

     // var image = document.createElement("img");

     // 另一种创建图片的方法

     var image = new Image();

     image.src = "1.jpg";

     document.body.appendChild(image);

     // console.log(image.width + ", " + image.height);

     image.onload = function(){

         console.log(image.width + ", " + image.height);

     };

 </script>

 </html>

JavaScript高级 面向对象（10）--onload与jq中ready的区别的更多相关文章

  1. JavaScript高级 面向对象（5）--内存逻辑图画法

    说明(2017.3.30): 1. 使用软件diagram designer,DiagramDesignerSetup1.28.zip,很小只有1M多,我用的自带画图软件.教学视频是“JavaScri ...

  2. 【Python全栈-JavaScript】JavaScript的window.onload()与jQuery 的ready()的区别

    JavaScript的window.onload()与jQuery 的ready()的区别 做web开发时常用Jquery中$(document).ready()和JavaScript中的window ...

  3. JavaScript高级 面向对象的程序设计 （一）《JavaScript高级程序设计（第三版）》

    创建对象 继承 面向对象的语言都有一个表示---类.通过类我们可以创建多个具有相同属性的对象.但是,在JS中并没有类的概念,所以JS的对象也和其他语言的对象不同. 对象的定义:无序的属性集合,其属性可 ...

  4. JavaScript高级 面向对象的程序设计 （二）《JavaScript高级程序设计（第三版）》

    二.继承 OO是面向对象语言最为有魅力的概念.一般的OO语言都实现了两种继承,接口继承和实现继承.接口继承只继承方法签名,而实际继承继承了实际的方法. 而在JS中,函数没有签名,所以无法实现接口继承. ...

  5. JavaScript高级程序设计(二)：在HTML中使用JavaScript

    一.使用<script>元素 1.<script>元素定义了6个属性: async:可选.表示应该立即下载脚本,但不应该妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本 ...

  6. JavaScript高级程序设计-10.11: DOM及其扩展

    什么是DOM? DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口).DOM描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分. 文档节点(do ...

  7. 《JavaScript高级程序设计》读书笔记--ECMAScript中所有函数的参数都是按值传递的

    ECMAScript中所有函数的参数都是按值传递的.也就是说把函数外部的值复制给函数内部的参数(内部参数的值的修改不影响实参的值). 基本类型变量的复制: 基本类型变量的复制,仅仅是值复制,num1和 ...

  8. JavaScript高级 面向对象（13）--构造函数的执行过程

    说明(2017-4-2 21:50:45) 一.构造函数是干什么用的: 1. 初始化数据的. 2. 在js给对象添加属性用的,初始化属性值用. 二.创建对象的过程: 1. 代码:var p = new ...

  9. JavaScript高级 面向对象（12）--引用类型值类型作为参数传递的特性

    说明(2017-4-2 18:27:11): 1. 作为函数的参数,就是将函数的数据拷贝一份,传递给函数的定义中的参数. 函数foo()在调用的时候,做了两件事: (1)函数在调用的时候,首先需要将参 ...

随机推荐

  1. CUDA 7.0 速查手册

    Create by Jane/Santaizi 03:57:00 3/14/2016 All right reserved. 速查手册基于 CUDA 7.0 toolkit documentation ...

  2. java RandomAccessFile类（随机访问文件）

    该类可以实现对同一个文件的读写操作,与其他IO流不同的是可以指定读写指针的脚标(seek),有跳过指定个数字节(skipBytes)操作. 另外该类也可用于断点续传. 简单示例如下: import j ...

  3. ContactsContract.Contacts之sort_key

    // 从Contacts表中找出所有联系人 Cursor cursor = context.getContentResolver().query(         ContactsContract.C ...

  4. cxf之java.lang.NoSuchMethodError: org.springframework.aop.support.AopUtils.isCglibProxyClass(Ljava/lang/C

    想用cxf发布一个web服务,但是容器启动报这个错,求高人解答啊 [问题点数:20分,无满意结帖,结帖人shijing266] 楼主好懒,主要还是jar版本的问题,spring4.2.0以上需要使用c ...

  5. java测试Unicode编码以及数组的运用（初学篇）

    /*第二章第四小题*/ /* * (1)编写一个应用程序,给出汉字“你” ,“我”,“他”在Unicode 表中的位置 * (2)编写一个java应用程序,输出全部的希腊字母 */ public cl ...

  6. HDUOJ-----1541 Stars

    Stars Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Subm ...

  7. Java中的资源文件加载方式

    文件加载方式有两种: 使用文件系统自带的路径机制,一个应用程序只能有一个当前目录,但可以有Path变量来访问多个目录 使用ClassPath路径机制,类路径跟Path全局变量一样也是有多个值 在Jav ...

  8. DPDK架构与特点

    当年在某公司实习的时候,当时老大给了我一份DPDK的文档,说是将来很有用,熟悉DPDK对能力提高也有帮助,就试着翻译了 <Intel DPDK Getting Started Guide> ...

  9. eclipse 垃圾回收器，内存释放

    http://zhangrong-0825-163-com.iteye.com/blog/7334071.如何在eclipse里修改web工程的访问路径,步骤如下: 点击web工程——>选择pr ...

  10. 2.Java基础：方法定义和调用

    一.方法的定义 1.类的方法代表的是实力的某种行为(或功能) 方法的定义:方法类型 . 方法签名 . 方法体 2.定义类的方法 访问修饰符 类型 方法名(参数列表){ ///方法体 } 3.把方法当作 ...