JS 中关于 Image对象 的那些事

原创 2018年04月15日 16:44:11

版权声明:本文为 小异常 原创文章,非商用自由转载-保持署名-注明出处,谢谢!
本文网址:https://blog.csdn.net/sun8112133/article/details/79950235

  前几天在教学生做一个关于图片上传的小例子时,遇到一个 JS 中 Image对象的问题。简单描述一下我遇到的问题:当我 new Image() 对象时,并为这个对象中的 src 属性赋值(路径中的图片是存在的)后,当输出 width或 height 时,输出的却是0,当时不明白为什么会发生这样的情况,去请教公司里的 web前端主管,他表示没有用过 Image这个对象,不清楚。于是我开始探索 JS 中 Image对象 这个“神奇的东西”。。。
  
  本篇主要对这件事情做个记录,用一个关于 Image对象的小例子来记录一下 Image 对象 中 width 和 height 属性 为什么会输出 0?!

  在没有了解 Image这个对象时,觉得这个问题很蹊跷,因为 src 这个路径中的图片明明是存在的,而且也可以在页面中显示出来,但为什么输出的 宽 和 高 却是0呢,现在想想这个问题再正常不过了。。。





一、关于 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>

效果如下:

控制台打印的效果


  当我们用惯了 JQuery后,却忽略了创造出 JQuery 的鼻祖—— JavaScript,它才是最强大的前端技术!



版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sun8112133/article/details/79950235

关于面试的那些事儿(1)

面试,背后的逻辑是啥?
  • zgwangbo
  • zgwangbo
  • 2016-06-21 06:45:05
  • 1085

关于抢红包那些事

我从未参与过抢红包,不知是因为个人隐私信息安全还是懒得去玩这种自认为无聊的游戏,耽误时间,总之就是不太感兴趣,哎,看来注定做不了潮人了,在学生们之前又少了些共同语言,呵呵,就做最真实的自己吧。 ...
  • shazao
  • shazao
  • 2016-02-12 07:24:27
  • 443

数据库设计的那些事儿!~(第一篇)

数据库设计的那些事儿!~(第一篇) 各位客官,大家好!今天让我们来聊一聊数据库设计的那些事儿!~ 数据库已经离不开我们的生活,作为一个后端开发人员,数据库的使用更是必不可少的,让我们来看一看为什么...
  • s740556472
  • s740556472
  • 2017-02-15 21:34:46
  • 942

关于大数据的那些事儿(一)

关于大数据的那些事儿(一)作为开发者,在大数据时代我们到底需要会什么?大数据到底是什么? 它是为了解决海量数据的存储和计算所出现的技术,包括结构化和非结构化数据 以及,存储数据的成本。只会搭搭集群...
  • qq1010885678
  • qq1010885678
  • 2015-12-24 21:17:49
  • 677

明朝那些事儿里的王守仁

今天我想跟大家分享的是有关王守仁,也就是王阳明的成长经历。字伯安,别号阳明。我对王守仁了解的不是太多,对他的心学更是还没进行过钻研。所以今天跟大家只是进行一些浅层面的分享。各位同学多多批评指正。一直以...
  • hahawhyha
  • hahawhyha
  • 2016-05-26 18:31:53
  • 2382

关于拍照那些事

if (Environment.getExternalStorageState().equals( Environment.MEDIA_MOUNTED)) { String m...
  • xiaoqun999
  • xiaoqun999
  • 2017-05-22 15:07:11
  • 127

网络安全那些事儿

之前很少对网络安全的基础技术有深入的了解,今天在项目中涉及到了公钥和私钥的一些知识,于是索性在网上找了资料来系统了解一下。1. 网络安全技术的目的互联网最初的设计是基于网络透明性的,一开始并没有考虑到...
  • jaye16
  • jaye16
  • 2016-09-02 09:10:05
  • 1435

谈谈Js事件的那些事儿

今天来谈谈Js中事件捕获与冒泡的问题。。。 事件捕获与冒泡,实际上是事件传播的两种方向。说实话“捕获”和“冒泡”这两个词语已经够形象生动了,我们从这两个词语的字面意思就应该清楚。 事件捕获就像电影中的...
  • yq_oxygen
  • yq_oxygen
  • 2016-07-11 23:59:23
  • 186

当Retrofit遇上HTTPS之关于HTTPS的那些事

* 本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布 由于前不久苹果公司已经强制IOS应用必须使用HTTPS协议开发,虽然Google没有强制开发者使用HTTPS,但相信不久的将来...
  • qq_20521573
  • qq_20521573
  • 2018-02-12 01:24:11
  • 401

算法的那些事

前言       通过一个月的算法学习,对于算法的了解不断深入,尤其是在郝老师和云姐、米老师的引导之下,自己的动手实践和思考同样重要。一种思维方式的训练和优秀的学习习惯在慢慢地形成。下面对于算法的内容...
  • m18633778874
  • m18633778874
  • 2017-09-05 18:11:58
  • 237
收藏助手
不良信息举报
您举报文章:JS 中关于 Image对象 的那些事
举报原因:
原因补充:

(最多只允许输入30个字)