JavaScript 实现图片预加载与随机展示实例

var Imgvalue;
var Count = 13; // 定义需要预加载的图片总数为13张
var Imgs = new Array(Count); // 创建数组用于存储图片对象
var ImgLoaded = 0; // 初始化已加载成功的图片计数器
// 定义预加载图片的主函数
function preLoadImgs()
{ 
alert('图片加载中请稍等......'); // 提示用户正在加载
for(var i=0;i<Imgs.length;i++){
Imgs[i]=new Image(); // 实例化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); // 若未完全加载，200毫秒后重试
    } 
else if (typeof Imgs[i].naturalWidth != "undefined" && Imgs[i].naturalWidth == 0)
    { 
window.setTimeout('downloadImage('+i+')',200); // 若宽度为0（加载失败），200毫秒后重试
    } 
else
    { 
ImgLoaded++ // 加载成功，计数器加1
if(ImgLoaded == Count)
        { 
document.getElementById('BtnStart').disabled=false; // 启用开始按钮
document.getElementById('BtnStop').disabled=false; // 启用停止按钮
alert('图片加载完毕！'); // 提示用户加载完成
        } 
    } 
} 
// 定义开始随机展示的功能
function RandStart()
{ 
Init = setInterval('SetRand()',50); // 每50毫秒执行一次随机显示
} 
// 定义随机显示图片的逻辑
function SetRand()
{ 
imageIndex = Math.floor(Math.random()*Count); // 生成随机索引
document.getElementById("ImgView").src = Imgs[imageIndex].src; // 更新显示的图片源
} 
// 定义停止随机展示的功能
function RandStop()
{ 
window.clearInterval(Init); // 清除定时器，停止随机切换
}