Image onload 事件

admin發表於2020-03-23
事件

通過 <img> 標籤可以在頁面中插入一個圖片。

程式碼片段如下：

[HTML] 純文字檢視 複製程式碼
<img src="ant.jpg">

src 屬性規定了將要插入圖片的地址，圖片的載入需要時間。

一旦圖片載入完畢，onload 事件將會觸發（準確的說是 load 事件）。

onload 是註冊事件處理函式的一種形式，具體參閱JavaScript 註冊事件處理函式一章節。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="https://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<script>
function loadImage(){
  var oDiv=document.getElementById("ant");
  oDiv.innerHTML="圖片載入完成";
}
</script>
</head>
<body>
  <img src="static/image/common/logo_sc.png" onload="loadImage()">
  <div id="ant"></div>
</body>
</html>

當圖片載入完畢，load事件觸發，指定loadImage()函式，將指定文字寫入div。

在實際應用中，可能需要動態 Image 物件，程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
var img=new Image();
img.onload=function(){
  var iheight=img.height;
  var iwidth=img.width;
  console.log("圖片寬高分別為:"+iwidth+"和"+"iwidth");
};
img.src="https://www.softwhy.com/static/image/common/logo_sc.png";

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/202003/23/000345xanunn9auu0yra09.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.首先通過建構函式建立一個Image物件例項img。

（2）.然後為img註冊load時間處理函式，當圖片載入完畢後，列印圖片尺寸。

（3）.最後才是規定圖片的地址，如果放在註冊load事件處理函式之前，可能會出現問題。

（4）.假設圖片載入迅速，在註冊load事件處理函式之前就已經載入完畢，那麼上述事件處理函式也就不會執行。

相關文章