HTML DOM Image 对象

HTML学习, JavaScript学习 本文总阅读量次

Image 对象

  • Image 对象代表嵌入的图像,可以通过Image()新建一个Image对象。
  • <img> 标签每出现一次，一个 Image 对象就会被创建。
  • 语法：const img = new Image();

属性

更多属性可参考这里

src 属性（设置后自动获取并显示图片）

  • src 属性可设置或返回图像的 URL，src 属性值更新时浏览器就会自动装载并显示出新图像。（当我们给Image对象设置一个src属性值时，浏览器就会自动发起一个HTTP请求，根据这个src的路径去取图片。）
  • 注释：该属性可在任意时间被更改。不过新图像会继承原始图像的 height 和 width 属性。
  • 该属性的初始值由标记<img>的 src 属性来设置。当把该属性设置为新图像的 URL 时，浏览器就会把那幅新图像装载并显示出来。这对于更新网页的图像外观以响应用户的动作非常有用。
  • 语法：imageObject.src=URL
  • 例子

事件

onload 事件（加载完成立即执行）

  • 页面或图像加载完成后立即发生。
  • onload 通常用于 <body> 元素，在页面完全载入后(包括图片、css文件等等)执行脚本代码。
  • 该事件可作用于以下 HTML 标签：<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
  • 对Image对象使用onload事件的例子

语法（推荐写在JS中）：
在 HTML 中:

1
<body onload="SomeJavaScriptCode">

在 JavaScript 中:

1
window.onload=function(){SomeJavaScriptCode};

注意

代码从上往下执行，在DOM事件中，如果先在<script>里获取对象再通过<div>定义对象会报错，因为这个对象的定义是出现在了获取的后面，你想要获取的时候还没定义。此时可以在<script>里对window使用onload事件（如下例子）

对window使用onload的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<head>
    <script>
        // 页面加载完成后才执行
        window.onload=function(){
            // 获取box
            var box =document.getElementById("box");
            var clicked=function(){
                alert("我被点击了！");
            }
            box.onclick=clicked;
        }
    </script>
</head>
<body>
    <div id="box">这是一个box</div>
</body>

onerror 事件(数据加载错误时执行)

语法（推荐写在JS中）:
HTML 中(myScript()写在JS中)：

1
<element onerror="myScript">

JavaScript 中：

1
object.onerror=function(){myScript};

JavaScript 中, 使用 addEventListener() 方法添加事件句柄(myScript()写在JS中):

1
object.addEventListener("error", myScript);

参数

通过onerror绑定在img上的函数接收一个参数，该参数可传递错误信息：

1
2
3
img.onerror = (e) => {
    return e;
}
HTML学习, JavaScript学习