javascript如何判斷一張圖片是否載入完成

admin發表於2017-03-08
JavaScript

在實際應用中有時候需要判斷圖片是否載入完成，以便判斷在完成前和完成後應該做哪些事情，下面就簡單介紹一下如何實現此功能。程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" />
<head>
<title>如何判斷一個圖片是否載入完成-螞蟻部落</title>
</head>
<body>
<img src="1.png" id="myimage" />
<script type="text/javascript">
var myimage=document.getElementById("myimage");
myimage.onload=function(){
  alert("圖片載入完成");
} 
</script>
</body>
</html>

以上程式碼，當圖片載入完成的時候會彈出一個提示框，實現了我們的需求。但是此種方法有個缺點，那就是不能夠使用window.onload=function(){}，因為這個時候文件已經載入完成了，圖片的onload事件自然就無效了。所以推薦使用動態方式。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" />
<head>
<title>如何判斷一個圖片是否載入完成-螞蟻部落</title>
<script type="text/javascript">
window.onload=function(){
  var mydiv=document.getElementById("mydiv");
  var newImage=new Image()
  newImage.src='1.png'
  newImage.onload=function(){
    alert("圖片載入完成");
    mydiv.appendChild(newImage);
  }
}
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>

以上程式碼同樣可以在圖片載入完成之後彈出一個對話方塊，並且將圖片在div中顯示。

相關文章