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>

效果如下:

控制台打印的效果


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



阅读更多

扫码向博主提问

小异常

用代码书写人生!!!
  • 擅长领域:
  • java
去开通我的Chat快问
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sun8112133/article/details/79950235
文章标签: js
个人分类: js
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭