js中的Image对象

太过爱你忘了你带给我的痛 2022-04-18 00:57 178阅读 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>