图片预加载 loading

最新推荐文章于 2023-02-20 17:02:19 发布

费小存

最新推荐文章于 2023-02-20 17:02:19 发布

阅读量720

点赞数

分类专栏：前端H5

本文链接：https://blog.csdn.net/F1594952/article/details/80936715

版权

前端H5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

loading进度条

var index = 0,
    len = imgs.length,
    count = 0,
    $progress = $('.progress');
$.each(imgs,function(i, src){
    var imgObj = new Image();
    $(imgObj).on('load error', function(){
        $progress.html(Math.round((count + 1) / len * 100)) + '%';
        //全部图片加载完毕，loading隐藏
        if (count >= len -1){
            $('.loading').hide();
            document.title = '1/'+len;
        }
        count++
    })
    imgObj.src = src;
})

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
html,
body { width: 100%; height: 100%;}
.loading { width: 100%; height: 100%; position: fixed; left: 0; top: 0; left: 0; bottom: 0;background: #fff;text-align: center;font-size: 30px;}
.progress { margin-top: 300px;}
.btnbox { text-align: center;}
.btnbox .btn { padding: 10px 30px; border: 1px solid #333; color: #333; display: inline-block;}
</style>

<body>
    <div class="imgWrapper">
        <img src="http://pic1.ulecdn.com/item/user_0102/desc20180702/22110364ec48d0bc_-1x-1.jpg" alt="" id="img">
        <p class="btnbox"><a href="javascript:;" class="btn" data-prop="prev">上一页</a>
            <a href="javascript:;" class="btn" data-prop="next">下一页</a></p>
    </div>
    <div class="loading">
        <p class="progress"> 0%</p>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
$(function() {
    var imgs = ['http://pic1.ulecdn.com/item/user_0102/desc20180702/22110364ec48d0bc_-1x-1.jpg', 'http://pic0.ulecdn.com/item/user_0102/desc20180629/c4a430f1548aba53_-1x-1.jpg', 'http://pic1.ulecdn.com/item/user_0102/desc20180704/ddb4a1e9597575cc_-1x-1.jpg', 'http://pic4.ulecdn.com/item/user_0102/desc20180627/0b65a542456aa6af_-1x-1.jpg'];
    var index = 0,
        len = imgs.length,
        count = 0,
        $progress = $('.progress');
    $.each(imgs, function(i, src) {
        var imgObj = new Image();
        $(imgObj).on('load error', function() {
            $progress.html(Math.round((count + 1) / len * 100) + '%');
            //全部图片加载完毕，loading隐藏
            if (count >= len - 1) {
                $('.loading').hide();
                document.title = '1/' + len;
            }
            count++
        })
        imgObj.src = src;
    })
    $('.btn').click(function() {
        if ($(this).data('prop') === 'prev') {
            index = Math.max(0, --index)
        } else {
            index = Math.min(len - 1, ++index)
        }
        $('#img').attr('src', imgs[index])
    })
})
</script>

</html>

费小存

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片预加载 loading

loading进度条var index = 0, len = imgs.length, count = 0, $progress = $('.progress');$.each(imgs,function(i, src){ var imgObj = new Image(); $(imgObj).on('load error', function()...
复制链接

扫一扫