图片预加载示例

参考文章：http://www.cnblogs.com/sailxc/archive/2011/06/15/2081271.html

代码如下：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>图片预加载</title>
<style type="text/css">
* { margin:0;padding:0; }
body{ font:12px/1.5 arial; }
.img_box { border:2px solid orange; padding:10px; margin-bottom:20px; }
</style>
</head>

<body>
<div id="img_box" class="img_box" imgIndex=""></div>
<input type="button" id="prev" value="上一张" />
<input type="button" id="next" value="下一张" />
<script type="text/javascript" src="js/jquery-1.6"></script>
<script type="text/javascript">
    var imgUrlArr=['http://sp1.yokacdn.com/photos/41/d4/675558/photo_74768_500.jpg','http://img.jujoy.com/Img/Img/ShoujiComCn/76/20057264156594.jpg','http://blogcache.artron.net/2009/03/30/70748_200903300715421YO92.jpg','http://imdiy.cn/wp-content/uploads/2008/03/fengjing.jpg'],
    $imgBox=$('#img_box'),
    $prevBtn=$('#prev'),
    $nextBtn=$('#next'),
    imgLen=imgUrlArr.length,
    preLoadImg,
    loadImg,
    index=0,
    prevImageIndex,
    nextImageIndex;
   
    prevImageIndex=function(index){
        return index=(index===0)?(imgLen-1):(index-1);
    };
    nextImageIndex=function(index){
        return index=(index===imgLen-1)?0:(index+1);
    };
    //预加载图片
    preLoadImg=function(url,index,callback){
        var img=new Image();
        img.src=url;
        $imgBox.text('图片加载中...');
        if(img.complete){
            callback.call(img,index);    
            return;
        }    
        img.onload=function(){
            callback.call(img,index);
        };
    };
    //加载图片完成后执行函数
    loadImg=function(index){
        $imgBox.text('').attr('imgIndex',index).append(this);
    };
    //事件绑定
    $prevBtn.click(function(e){
        index=parseInt($imgBox.attr('imgIndex'));
        preLoadImg(imgUrlArr[index],prevImageIndex(index),loadImg);   
    });
    $nextBtn.click(function(e){ 
        index=parseInt($imgBox.attr('imgIndex'));
        preLoadImg(imgUrlArr[index],nextImageIndex(index),loadImg);    
    });
    //初始化
    if($imgBox.attr('imgIndex')===''){
        preLoadImg(imgUrlArr[index],index,loadImg);
    }
</script>
</body>
</html>
posted @ 2012-06-18 19:12  xmlovecss  阅读(252)  评论(0)    收藏  举报