JS中圖片緩沖loading技術(shù)的實(shí)例代碼
更新時(shí)間:2013年08月29日 15:38:46 作者:
這篇文章介紹了JS中圖片緩沖loading技術(shù)的實(shí)例代碼,有需要的朋友可以參考一下
復(fù)制代碼 代碼如下:
var Imgvalue;
var Count =13; //圖片數(shù)量
var Imgs = new Array(Count);
var ImgLoaded =0;
//預(yù)加載圖片
function preLoadImgs()
{
alert('圖片加載中請(qǐng)稍等......');
for(var i=0;i<Imgs.length;i++){
Imgs[i]=new Image();
downloadImage(i);
}
}
//加載單個(gè)圖片
function downloadImage(i)
{
var imageIndex = i+1; //圖片以1開始
Imgs[i].src = "images/"+imageIndex+".jpg";
Imgs[i].onLoad=validateImages(i);
}
//驗(yàn)證是否成功加載完成,如不成功則重新加載
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);
}
//隨機(jī)顯示
function SetRand()
{
imageIndex = Math.floor(Math.random()*Count);
document.getElementById("ImgView").src = Imgs[imageIndex].src;
}
//結(jié)束
function RandStop()
{
window.clearInterval(Init);
}
您可能感興趣的文章:
- 原生JS實(shí)現(xiàn)勻速圖片輪播動(dòng)畫
- 原生javascript實(shí)現(xiàn)勻速運(yùn)動(dòng)動(dòng)畫效果
- JS+CSS實(shí)現(xiàn)鼠標(biāo)經(jīng)過彈出一個(gè)DIV框完整實(shí)例(帶緩沖動(dòng)畫漸變效果)
- JS判斷頁面加載狀態(tài)以及添加遮罩和緩沖動(dòng)畫的代碼
- 漂亮的js tab圖片輪換效果代碼(可自定義的幻燈片和圖片緩沖切換)
- js 全兼容可高亮二級(jí)緩沖折疊菜單
- JavaScript中的勻速運(yùn)動(dòng)和變速(緩沖)運(yùn)動(dòng)詳細(xì)介紹
- javascript 層展開/關(guān)閉,帶緩沖效果
- js實(shí)現(xiàn)緩沖運(yùn)動(dòng)效果的方法
- javascript勻速動(dòng)畫和緩沖動(dòng)畫詳解
相關(guān)文章
利用JavaScript實(shí)現(xiàn)簡單全選和全不選的思路和方法
最近開始練習(xí)js的基本操作,常常因?yàn)橐恍┬∈韬鰧?dǎo)致頁面效果無法實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于利用JavaScript實(shí)現(xiàn)簡單全選和不全選的思路和方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07JavaScript判斷用戶名和密碼不能為空的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄狫avaScript判斷用戶名和密碼不能為空的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考,一起跟隨小編過來看看吧2016-05-05javascript 實(shí)現(xiàn)鍵盤上下左右功能的小例子
這篇文章介紹了javascript 實(shí)現(xiàn)鍵盤上下左右功能的小例子,有需要的朋友可以參考一下2013-09-09