JS中圖片緩衝loading技術的執行個體代碼,

來源:互聯網
上載者:User

JS中圖片緩衝loading技術的執行個體代碼,
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);
}

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.