元素
元素用于插入圖片，主要繼承了 HTMLImageElement 接口。
瀏覽器提供一個原生構造函數Image，用于生成HTMLImageElement實例。
var img = new Image();img instanceof Image // trueimg instanceof HTMLImageElement // true
Image構造函數可以接受兩個整數作為參數，分別表示元素的寬度和高度。
// 語法Image(width, height)// 用法var myImage = new Image(100, 200);
實例的src屬性可以定義圖像的網址。
var img = new Image();img.src = 'picture.jpg';
新生成的實例并不屬于文檔的一部分。如果想讓它顯示在文檔中，必須手動插入文檔。
var img = new Image();img.src = 'image1.png';document.body.appendChild(img);
除了使用Image構造，下面的方法也可以得到HTMLImageElement實例。
- document.images的成員
- 節點選取方法（比如document.getElementById）得到的節點
- document.createElement('img')生成的節點
document.images[0] instanceof HTMLImageElement// truevar img = document.getElementById('myImg');img instanceof HTMLImageElement// truevar img = document.createElement('img');img instanceof HTMLImageElement// true
HTMLImageElement實例除了具有 Node、Element、HTMLElement 接口以外，還擁有一些獨有的屬性。這個接口沒有定義自己的方法。
特性相關的屬性
（1）HTMLImageElement.src
HTMLImageElement.src屬性返回圖像的完整網址。
// HTML 代碼如下//var img = document.getElementById('img');img.src // http://example.com/pic.jpg
（2）HTMLImageElement.currentSrc
HTMLImageElement.currentSrc屬性返回當前正在展示的圖像的網址。JavaScript 和 CSS 的 mediaQuery 都可能改變正在展示的圖像。
（3）HTMLImageElement.alt
HTMLImageElement.alt屬性可以讀寫的 HTML 屬性alt，表示對圖片的文字說明。
（4）HTMLImageElement.isMap，HTMLImageElement.useMap
HTMLImageElement.isMap屬性對應元素的 HTML 屬性ismap，返回一個布爾值，表示圖像是否為服務器端的圖像映射的一部分。
HTMLImageElement.useMap屬性對應元素的 HTML 屬性usemap，表示當前圖像對應的元素。
（5）HTMLImageElement.srcset，HTMLImageElement.sizes
HTMLImageElement.srcset屬性和HTMLImageElement.sizes屬性，分別用于讀寫元素的srcset屬性和sizes屬性。它們用于元素的響應式加載。srcset屬性可以單獨使用，但是sizes屬性必須與srcset屬性同時使用。
// HTML 代碼如下//// example-480w.jpg 480w,// example-800w.jpg 800w"http:// sizes="(max-width: 320px) 280px,// (max-width: 480px) 440px,// 800px"http:// id="myImg"http:// src="example-800w.jpg">var img = document.getElementById('myImg');img.srcset// "example-320w.jpg 320w,// example-480w.jpg 480w,// example-800w.jpg 800w"img.sizes// "(max-width: 320px) 280px,// (max-width: 480px) 440px,// 800px"
上面代碼中，sizes屬性指定，對于小于320px的屏幕，圖像的寬度為280px；對于小于480px的屏幕，圖像寬度為440px；其他情況下，圖像寬度為800px。然后，瀏覽器會根據當前屏幕下的圖像寬度，到srcset屬性加載寬度最接近的圖像。
HTMLImageElement.width，HTMLImageElement.height
width屬性表示的 HTML 寬度，height屬性表示高度。這兩個屬性返回的都是整數。
// HTML 代碼如下//var img = document.getElementById('img');img.width // 300img.height // 400
如果圖像還沒有加載，這兩個屬性返回的都是0。
如果 HTML 代碼沒有設置width和height屬性，則它們返回的是圖像的實際寬度和高度，即HTMLImageElement.naturalWidth屬性和HTMLImageElement.naturalHeight屬性。
HTMLImageElement.naturalWidth，HTMLImageElement.naturalHeight
HTMLImageElement.naturalWidth屬性表示圖像的實際寬度（單位像素），HTMLImageElement.naturalHeight屬性表示實際高度。這兩個屬性返回的都是整數。
如果圖像還沒有指定或不可得，這兩個屬性都等于0。
var img = document.getElementById('img');if (img.naturalHeight > img.naturalWidth) {img.classList.add('portrait');}
上面代碼中，如果圖片的高度大于寬度，則設為portrait模式。
HTMLImageElement.complete
HTMLImageElement.complete屬性返回一個布爾值，表示圖表是否已經加載完成。如果元素沒有src屬性，也會返回true。
HTMLImageElement.crossOrigin
HTMLImageElement.crossOrigin屬性用于讀寫元素的crossorigin屬性，表示跨域設置。
這個屬性有兩個可能的值。
- anonymous：跨域請求不要求用戶身份（credentials），這是默認值。
- use-credentials：跨域請求要求用戶身份。
// HTML 代碼如下//var img = document.getElementById('img');img.crossOrigin // "anonymous"
HTMLImageElement.referrerPolicy
HTMLImageElement.referrerPolicy用來讀寫元素的 HTML 屬性referrerpolicy，表示請求圖像資源時，如何處理 HTTP 請求的referrer字段。
它有五個可能的值。
- no-referrer：不帶有referrer字段。
- no-referrer-when-downgrade：如果請求的地址不是 HTTPS 協議，就不帶有referrer字段，這是默認值。
- origin：referrer字段是當前網頁的地址，包含協議、域名和端口。
- origin-when-cross-origin：如果請求的地址與當前網頁是同源關系，那么referrer字段將帶有完整路徑，否則將只包含協議、域名和端口。
- unsafe-url：referrer字段包含當前網頁的地址，除了協議、域名和端口以外，還包括路徑。這個設置是不安全的，因為會泄漏路徑信息。
HTMLImageElement.x，HTMLImageElement.y
HTMLImageElement.x屬性返回圖像左上角相對于頁面左上角的橫坐標，HTMLImageElement.y屬性返回縱坐標。
事件屬性
圖像加載完成，會觸發onload屬性指定的回調函數。
// HTML 代碼為function loadImage() {console.log('Image is loaded');}
圖像加載過程中發生錯誤，會觸發onerror屬性指定的回調函數。
// HTML 代碼為function myFunction() {console.log('There is something wrong');}
