js中的Image对象

71 阅读 0 评论 47 点赞

我是靠谱客的博主无限红酒，最近开发中收集的这篇文章主要介绍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>