javascript圖片預載入詳細介紹

antzone發表於2017-03-14
JavaScript

漂亮清晰的圖片往往能夠給網站增色不少，但是也會帶來不少的問題，漂亮清晰的圖片自然自然在傳輸的時候會耗費更長的時間，如果我們需要即時的切換一張圖片的話可能會帶來延遲，例如在網頁上有一張圖片，當滑鼠放在此圖片上的時候能夠切換成另一張圖片，這個時候可能會出現延遲，如果實現將需要切換的圖片顯示出來，那麼網站的效果就會更加流暢，這其實就是圖片預載入，下面就來簡單的介紹一下。

先看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>圖片預載入-螞蟻部落</title>
<script type="text/javascript"> 
function preloader() 
{ 
  switchImg=new Image(); 
  switchImg.src="switchImgFile.jpg"; 
} 
window.onload=function()
{
  preloader(); 
  var thelink=document.getElementById("thelink");
  var theimg=document.getElementById("theimg");
  thelink.onmouseover=function()
  {
     theimg.src="switchImgFile.jpg"; 
  }
}
</script> 
</head> 
<body> 
  <a href="#" id="thelink"><img id="theimg" src="currentfile.jpg"></a> 
</body> 
</html>

以上就是一個簡單的圖片預載入程式碼例項，下面簡單做一下介紹:

在上面的程式碼中，當穩當載入完畢之後就會執行preloader()函式，此函式中可以建立一個圖片物件，並將圖片物件的src屬性值設定為要切換的圖片，這樣此圖片就會被放入快取，當滑鼠放在連結上的時候，那麼switchImgFile.jpg就會從快取中讀取，這樣就不會出現延遲了。以上僅僅對單圖片的處理，如果有很多圖片需要被預載入，那麼就可以結合陣列來是實現此效果。

再來看一段程式碼例項:

[JavaScript] 純文字檢視 複製程式碼
function preloader() { 
  var i=0; 
  imageObj=new Image(); 
  images=new Array(); 
  images[0]="image1.jpg"
  images[1]="image2.jpg"
  images[2]="image3.jpg"
  images[3]="image4.jpg"
   
  for(i=0;i<=3;i++) { 
    imageObj.src=images[i]; 
  } 
}

以上程式碼中，首先將圖片的路徑放入陣列，然後在使用for迴圈語句遍歷陣列，並將相應的值賦值給image物件的src屬性，這樣就實現了圖片放入快取了，這樣就實現了圖片的預載入效果。

相關文章