js中的Image对象

一、关于 Image 对象的小例子
　　先把这个小例子的代码粘过来

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="img"></div><script>// 获取 id为 img 的元素var img = document.getElementById('img');// 创建 Image对象var imgObj = new Image();// 为 src 属性赋值imgObj.src = "img/demo.jpg";// 将 Image对象插入到 img元素中img.appendChild(imgObj);// 控制台打印 Image对象的 宽 和 高console.log(imgObj.width + "----" + imgObj.height);</script>
</body>
</html>

二、Image 对象的简单介绍
　　Image 对象是 JS 中的内置对象，它代表嵌入的图像。当我们创建一个 Image 对象时，就相当于给浏览器缓存了一张图片，Image 对象也常用来做预加载图片（也就是将图片预先加载到浏览器中，当浏览图片的时候就能享受到极快的加载速度）。在HTML页面中，<img> 标签每出现一次，也就创建了一个 Image 对象。

　　在创建 Image 对象后，如果没有给它的 width 和 height 属性赋值，那它的 width 和 height 的默认值都为0。有可能你会问，我将 Image对象插入到 HTML页面中并且已经显示出来了，那为什么 width 和 height 还是0呢？其实大家都忽略了一个最重要的问题，就是 HTML代码的加载和图片的加载所用的时间。

　　HTML代码的加载和图片的加载是同时的，虽然图片已经进行过预加载，但是尽管这样加载的速度相比较 HTML 代码的加载速度还是要慢一些的。

　　因此，就需要用 Image对象中的 onload事件来解决这个问题了。。
三、改进后的小例子

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="img"></div><script>// 获取 id为 img 的元素var img = document.getElementById('img');// 创建 Image对象var imgObj = new Image();// 为 src 属性赋值imgObj.src = "img/demo.jpg";// 将 Image对象插入到 img元素中img.appendChild(imgObj);// 当 imgObj 加载完毕后触发事件imgObj.onload = function () {// 控制台打印 Image对象的 宽 和 高console.log(imgObj.width + "----" + imgObj.height);};</script>
</body>
</html>

js中的Image对象相关推荐

js中的DOM对象和jQuery对象的比较
1. 二者的不同之处: 通过jQuery获取的元素是一个数组, 数组中包含着原生JS中的DOM对象. 例如, 针对下面的一个div结构: <div id="Box">& ...
js中两个对象的比较
代码取自于underscore.js 1.8.3的isEqual函数. 做了一些小小的修改,主要是Function的比较修改. 自己也加了一些代码解读. <!DOCTYPE html> & ...
JavaScript -- 时光流逝（三）：js中的 String 对象的方法
JavaScript -- 知识点回顾篇(三):js中的 String 对象的方法 (1) anchor(): 创建 HTML 锚. <script type="text/javasc ...
js中关于Blob对象的介绍与使用
js中关于Blob对象的介绍与使用 blob对象介绍一个 Blob对象表示一个不可变的, 原始数据的类似文件对象.Blob表示的数据不一定是一个JavaScript原生格式 blob对象本质上是js ...
js mysql json字符串转数组中_php数据库数据转换为js中的json对象
/ 1.在company数据user表中取出10条数据,保存为数组 2.在将数组转化为json格式,传递给js 3.用json解析器将传递过来的json字符串转化为json对象, 4.用documen ...
js中几个对象的区别和用法
js中几个对象的区别和用法今天总结一下js中几个对象的区别和用法: 首先来说说 parent.window与top.window的用法 "window.location.href" ...
【JS笔记】JS中的DOM对象以及通过JS获取DOM结点，操作DOM属性、DOM增删改查
这篇文章,主要介绍JS中的DOM对象以及通过JS获取DOM结点,操作DOM属性.DOM增删改查. 目录一.JS中的DOM 1.1.什么是DOM 1.2.获取DOM结点 (1)获取htm ...
JS中的event 对象详解
JS中的event 对象详解 JS的event对象 Event属性和方法: 1. type:事件的类型,如onlick中的click: 2. srcElement/target:事件源,就是发生事件的 ...
了解Express.js中的res对象
The res object in Express.js, short for response, gives you a simple interface to respond to HTTP re ...
你还认为JS中万物皆对象？
经常在国内的各大网站博客上看到一句话,叫做JS中万物皆对象,那是否真是如此? 那么,我们先来捋一捋JS中的数据类型,JS中的数据类型有下面几种 Undefined Null Boolean Numbe ...

js中的Image对象

js中的Image对象相关推荐

最新文章

热门文章