JS中圖片緩沖loading技術的實例代碼
更新時間:2013年08月29日 15:38:46 作者:
這篇文章介紹了JS中圖片緩沖loading技術的實例代碼,有需要的朋友可以參考一下
復制代碼 代碼如下:
var Imgvalue;
var Count =13; //圖片數(shù)量
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);
}
相關文章
Webpack中l(wèi)oader打包各種文件的方法實例
這篇文章主要給大家介紹了關于Webpack中l(wèi)oader打包各種文件的相關資料,其中包括處理css文件、less文件、scss文件、url地址以及ES6高級語法的方法,需要的朋友可以參考下2019-09-09
查詢綁定數(shù)據(jù)島的表格中的文本并修改顯示方式的js代碼
查詢綁定數(shù)據(jù)島的表格中的文本并修改顯示方式的js代碼2009-12-12
JavaScript中的函數(shù)聲明和函數(shù)表達式區(qū)別淺析
這篇文章主要介紹了JavaScript中的函數(shù)聲明和函數(shù)表達式區(qū)別淺析,本文總結的淺顯易懂,非常好的一篇技術文章,需要的朋友可以參考下2015-03-03
.net JS模擬Repeater控件的實現(xiàn)代碼
一個模板控件規(guī)定了它的模板語法和js api,這是一個repeater控件的JS實現(xiàn):2013-06-06

