js圖片緩衝載入程式碼例項

一般的圖片展或者圖片較多的網站都會使用圖片緩衝載入技術，可以說對提高網站的體驗度有良好的效果，下面就分享一段網路上的相關程式碼，希望能夠給大家帶來一定的幫助，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
var Imgvalue; 
var Count =13;//圖片數量 
var Imgs = new Array(Count); 
var ImgLoaded =0; 
//預載入圖片 
function preLoadImgs() 
{ 
  alert('圖片載入中請稍等......'); 
  for(var i=0;i<Imgs.length;i++){ 
    Imgs[i] = new Image();
    downloadImage(i); 
  } 
} 
//載入單個圖片 
function downloadImage(i) 
{ 
  var imageIndex = i+1; //圖片以1開始 
  Imgs[i].src = "images/"+imageIndex+".jpg"; 
  Imgs[i].onLoad = validateImages(i);
} 
//驗證是否成功載入完成，如不成功則重新載入 
function validateImages(i)
{ 
  if(!Imgs[i].complete) 
  { 
    window.setTimeout('downloadImage('+i+')',200);     
  } 
  else if(typeof Imgs[i].naturalWidth!="undefined"&&Imgs[i].naturalWidth==0) { 
    window.setTimeout('downloadImage('+i+')',200); 
  } 
  else  { 
    ImgLoaded++ 
    if(ImgLoaded == Count) { 
      document.getElementById('BtnStart').disabled=false; 
      document.getElementById('BtnStop').disabled=false; 
      alert('圖片載入完畢！'); 
    } 
  } 
} 
//開始 
function RandStart() { 
  Init = setInterval('SetRand()',50);     
} 
//隨機顯示 
function SetRand() { 
  imageIndex = Math.floor(Math.random()*Count); 
  document.getElementById("ImgView").src = Imgs[imageIndex].src; 
} 
//結束 
function RandStop() { 
  window.clearInterval(Init); 
}