寫了個SlideShow的原型,利用image的complete,判斷圖片是否調(diào)用完全，調(diào)用完全以后才顯示，否則是LOADING的圖片，還考慮的是
1.每調(diào)用一張圖片之前先出現(xiàn)loading的過程,
2.調(diào)用圖片中不會因為網(wǎng)速和圖片過大而未顯示全,直接跳到下一張,要按順序一張一張播放.
3.第一次 播放的時候，因為調(diào)用圖片會慢一點，重新播放是調(diào)用CACHE里的，速度就快了
代碼如下：
var currCount=0
var stop=false
function getimg(n){
preImages= new Image()
preImages.src = yourImages[n]
}
function autoPlay(){
if(currCount!=yourImages.length){
document.getElementById("img").style.display="none"
getimg(currCount)
document.getElementById("loadingbar").style.display="block"
setTimeout("loadingImg()",1000)
}
else{
currCount=0;
if (confirm("播放完畢,是否重新播放?")){
return autoPlay()
}
}
}
function loadingImg(){
if (preImages.complete) {
document.getElementById("img").src="
http://blog.donews.com/images/blog_donews_com/dodo/49134/o_pix.gif"
document.getElementById("loadingbar").style.display="none"
document.getElementById("img").style.display="block"
document.getElementById("img").src=yourImages[currCount]
currCount=currCount+1
}
setTimeout("autoPlay()",4000)
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF">
<div style="width:700px">
<center>
<a href="javascript:autoPlay()">自動播放</a><br><br>
<div id="loadingbar" style="display:none;"><img src=http://blog.donews.com/images/blog_donews_com/dodo/49134/o_loading.gif></div>
<img id="img" src=http://blog.donews.com/images/blog_donews_com/dodo/49134/o_pix.gif >
<center>
</div>
</body>
</html>
文章來源:
http://blog.itpub.net/post/7956/49057