JS 中關於 Image物件 的那些事
前幾天在教學生做一個關於圖片上傳的小例子時，遇到一個 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 效果如下：
二、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，它才是最強大的前端技術！