图片无序预加载笔记

来源：互联网发布：pdf文字编辑器for mac 编辑：程序博客网时间：2024/06/05 10:54
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><style>    html{        width:100%;        height:100%;    }    a{        text-decoration:none;    }    .content{        text-align:center;    }    .button{        display:inline-block;        border:1px solid #333;        color:#ccc;        background-color:#fff;        height:30px;        line-height:30px;        padding:0 10px;        margin-right:50px;    }    .button:hover{        background-color:#eee;    }    .load{        position:fixed;        width:100%;        height:100%;        top:0;        left:0;        background-color: #ccc;        text-align: center;        font-size:40px;    }    .progress{        margin-top:500px;    }</style><body><div class="content">    <img src="../image/1.jpg" width="1200">    <p>        <a href="javascript:;" class="button" data-control="pre">上一页</a>        <a href="javascript:;" class="button" data-control="next">下一页</a>    </p></div><div class="load">    <p class="progress">        0%    </p></div></body><script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script><script type="text/javascript">    $(function(){        var imgs = ["../image/1.jpg",            "../image/2.jpg",            "../image/3.jpg",            "../image/4.jpg",            "../image/5.jpg",            "../image/6.jpg",            "../image/7.jpg",            "../image/8.jpg",            "../image/9.jpg",            "../image/10.jpg",            "../image/11.jpg",            "../image/12.jpg",            "../image/iVPGGC.png",        ];        var index = 0,            len = imgs.length,                count=0;        $.each(imgs,function(i,src){            var img = new Image();            $(img).on('load error',function(){   //加载成功和失败都去执行                $(".progress").html(Math.round((count+1)/len*100)+'%');                if(count>=len-1){                    $(".load").hide();                }                    count++;            })            img.src = src;        })        $(".button").on("click",function(){            if('pre' === $(this).data("control")){  //点击的如果是上一页//                index--;//                if(index<0){//                    index =0;//                }                index = Math.max(0,--index);            }else{//                index++;//                if(index>len-1){//                    index = len -1;//                }                index = Math.min(len-1,++index);            }            $("img").attr("src",imgs[index]);        })    })</script></html>
阅读全文
0 0