图片无序预加载笔记

最新推荐文章于 2021-09-04 16:59:31 发布

fly18702787810

最新推荐文章于 2021-09-04 16:59:31 发布

阅读量194

点赞数

本文链接：https://blog.csdn.net/fly18702787810/article/details/73609996

版权

<!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>

fly18702787810

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片无序预加载笔记

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle>head>style> html{ width:100%; height:100%; } a{ text-decoration:none; } .conten
复制链接

扫一扫