`
shishi11
  • 浏览: 114154 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

预载图片(怕忘了,放这儿)

阅读更多

< script >
</ script >
< html >
< body >
< div id = " testMessage "  style = " border:2px solid skyblue;width:300px;height:60px " ></ div >
< div id = " photoContrl "  style = " display:none " >
    
< button onclick = " prevPhoto() " > Previous </ button >
    
< button onclick = " nextPhoto() " > Next </ button >
    
< button onclick = " autoPlay() "  id = " pp " > Play </ button >
    
< button onclick = " stopPlay() " > Stop </ button >
</ div >
< div style = " border:1px solid gold;width:600px;background:dodgerblue " >< img src = " http://bbsimg.ali213.net/customavatars/1303244.gif "  id = " photo "  style = "" ></ div >
</ body >
</ html >
< script >
    
    
function  tM(Message)
    {
        $(
" testMessage " ).innerHTML = Message
    }
    
function  dR(topr)
    {
        document.write(topr)
    }
    
function  $(eleId)
    {
return  document.getElementById(eleId)}
    
// 预载图片
     var  imasrc = new  Array( " http://news.mydrivers.com/img/20070813/10254068.jpg "
    ,
" http://news.mydrivers.com/img/20070813/10254629.jpg "
    ,
" http://news.mydrivers.com/img/20070813/10255187.jpg "
    ,
" http://news.mydrivers.com/img/20070813/10255626.jpg "
    ,
" http://news.mydrivers.com/img/20070813/10260076.jpg "
    ,
" http://news.mydrivers.com/img/20070813/10260471.jpg "
    ,
" http://news.mydrivers.com/img/20070813/10261022.jpg "
    ,
" http://news.mydrivers.com/img/20070813/10261479.jpg " ) // 图片路径写入数组
     var  preIma = new  Array()
    
var  dB = new  Date()
    
for  (i = 0 ;i  <  imasrc.length;i ++ ) // 预载所有图片
    {
        preLoadImg(i)
    }
    
function  preLoadImg(imgIndex) // 预载指定图片图片
    {
        preIma[imgIndex]
= new  Image()
        preIma[imgIndex].imgReadyStatus
= false
        preIma[imgIndex].imgIndex
= imgIndex
        preIma[imgIndex].onload
= imgLoad
        preIma[imgIndex].onerror
= imgError
        preIma[imgIndex].onabort
= imgAbort
        preIma[imgIndex].src
= imasrc[imgIndex]
    }
    
function  imgLoad() // 预载完成
    {
        
this .imgReadyStatus = true
    }
    
function  imgError() // 预载失败
    {
        preLoadImg(
this .imgIndex)
    }
    
function  imgAbort() // 预载取消
    {
        preIma.splice(
this .imgIndex, 1 )
    }
    
var  checkAgain
    
function  checkImgReadyStatus() // 检索加载状态
    {
        
var  imgReadyStatus = true
        
var  persent = 0
        
var  dE = new  Date()
        
for  (i = 0 ;i  <  preIma.length;i ++ )
        {
            
if  ( ! preIma[i].imgReadyStatus)
            {imgReadyStatus
= false }
            
else
            {persent
++ }
        }
        tM(
" 完成: " + (persent / preIma.length * 100 ).toFixed( 2 ) + " %<br>载入: " + persent + " 张图片<br>消耗时间: " + ((dE - dB) / 1000 ).toFixed( 0 ) + " " ) // 显示进度
         if  (imgReadyStatus)
        {
            $(
" photoContrl " ).style.display = " block "
            autoPlay()
            clearTimeout(checkAgain)
        }
        
else
        {
            checkAgain
= setTimeout(checkImgReadyStatus, 1000 ) // 检索频率
        }
    }
    checkImgReadyStatus()

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics