熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> Javascript >> 正文

JS中圖片緩沖loading技術的實例代碼

2022-06-13   來源: Javascript 

  復制代碼 代碼如下:

  var Imgvalue;
var Count =;   //圖片數量
var Imgs = new Array(Count);
var ImgLoaded =;
//預加載圖片
function preLoadImgs()
{
alert(圖片加載中請稍等);
for(var i=;i<Imgslength;i++){
Imgs[i]=new Image();
downloadImage(i);
}
}
//加載單個圖片
function downloadImage(i)
{
    var imageIndex = i+; //圖片以開始
    Imgs[i]src = images/+imageIndex+jpg;
    Imgs[i]onLoad=validateImages(i);
}
//驗證是否成功加載完成如不成功則重新加載
function validateImages(i){
if (!Imgs[plete)
    {
     windowsetTimeout(downloadImage(+i+));    
    }
else if (typeof Imgs[i]naturalWidth != undefined && Imgs[i]naturalWidth == )
    {
    windowsetTimeout(downloadImage(+i+));
    }
    else 
    {
        ImgLoaded++
        if(ImgLoaded == Count)
        {
            documentgetElementById(BtnStart)disabled=false;
            documentgetElementById(BtnStop)disabled=false;
            alert(圖片加載完畢!);
        }
    }
}
//開始
function RandStart()
{
    Init = setInterval(SetRand());    
}
//隨機顯示
function SetRand()
{
    imageIndex = Mathfloor(Mathrandom()*Count);
    documentgetElementById(ImgView)src = Imgs[imageIndex]src;
}
//結束
function RandStop()
{
    windowclearInterval(Init);
}


From:http://tw.wingwit.com/Article/program/Java/Javascript/201404/30465.html
    推薦文章
    Copyright © 2005-2022 電腦知識網 Computer Knowledge   All rights reserved.