JS 中关于 Image对象的那些事

60 阅读 0 评论 40 点赞

我是靠谱客的博主苗条小鸽子，最近开发中收集的这篇文章主要介绍JS 中关于 Image对象的那些事，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

版权声明：本文为小异常原创文章，非商用自由转载-保持署名-注明出处，谢谢！
本文网址：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>