如何在低版本IE瀏覽器中實現判斷img圖片載入完畢

admin發表於2017-04-01
瀏覽器

在IE7和IE6瀏覽器中，當瀏覽器第一次載入完畢圖片的時候會觸發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(){
  alert("圖片已經載入完畢。");
}
</script> 
</head> 
<body>
<div id="show"></div>
</body> 
</html>

之所以發生這種現象，網上的解釋是，從快取讀取資料實在是速度太快了，當圖片載入完畢的時候，還沒有執行到事件處理函式的註冊，我們姑且相信這個理論是正確的，然後解決方案如下:

[JavaScript] 純文字檢視 複製程式碼
var image=new Image();
image.onload=function(){
  alert("圖片已經載入完畢。");
}
image.src="demo/CSS/img/map.jpg";

也就是調整一下語句的順序，這樣就可以實現相容所有瀏覽器的onload事件效果。

相關文章