js如何判斷img圖片是否載入完畢

admin發表於2017-04-01
原文網址 : https://www.softwhy.com/article-5376-1.html
JS

有時候我們需要判斷一個圖片是否載入完畢，如果載入完畢再去幹其他的事情。

恰好img元素具有onload事件可以判斷功能。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
var odiv=document.getElementById("show");
var image=new Image();
image.src="demo/CSS/img/map.jpg";
image.onload=function(){
  document.getElementById("img").src=image.src;
}
</script> 
</head> 
<body>
<div id="show"></div>
<img id="img">
</body> 
</html>

但是上面的程式碼具有一定的瀏覽器相容性問題，在低版本的IE中可能不會觸發onload事件。

解決相容問題可以參閱如何在低版本IE瀏覽器中實現判斷img圖片載入完畢一章節。

相關文章