显示图片加载百分比

已注销
821 阅读1分钟

起因

之前做一个图片库, 里面是一个图片的长列表, 由于服务器限制, 需要在初始加载图片时增加loading状态, 一开始使用了一个 gif 的动态图, 展示效果时无法满足需求, 于是想着增加一个图片加载的动画, 本着学习的目的, 自己写了一个简易版

开整

先找几个图片放到 body 中

<body>
<img src="http://p5.so.qhimgs1.com/t01e106d388b84446fb.jpg" alt="">
<img src="http://p1.so.qhimgs1.com/t0108345cd910aa2001.jpg" alt="">
<img src="http://p0.so.qhimgs1.com/t018af2fd529ffe9430.jpg" alt="">
<img src="http://p0.so.qhimgs1.com/t011b2ae72302c65c7c.jpg" alt="">
<img src="http://p4.so.qhimgs1.com/t0177195326fc99587a.jpg" alt="">
<img src="http://p1.so.qhimgs1.com/t013a13ff12fedabb0d.jpg" alt="">
<img src="http://p5.so.qhimgs1.com/t014613a93555dfb08b.jpg" alt="">
<img src="http://p5.so.qhimgs1.com/t01d0a776568aa414db.jpg" alt="">
<img src="http://p0.so.qhimgs1.com/t015d22c626cacabfc0.jpg" alt="">
<img src="http://p2.so.qhimgs1.com/t01e1560c65bc5a1d0e.jpg" alt="">
<img src="http://p1.so.qhimgs1.com/t01161a801f8f8dc64d.jpg" alt="">
<img src="http://p3.so.qhimgs1.com/t01ca9875d1b68564f3.jpg" alt="">
<img src="http://pic.jj20.com/up/allimg/1011/05241G14R6/1F524114R6-4.jpg" alt="">
<img src="http://pic1.win4000.com/wallpaper/a/595b27a628a22.jpg" alt="">
<img src="http://pic.jj20.com/up/allimg/1011/05241G14R6/1F524114R6-11.jpg" alt="">
<img src="http://pic1.win4000.com/wallpaper/a/568cd27741af5.jpg" alt="">
<img src="http://pic.jj20.com/up/allimg/1011/0FQG41H8/1FFQ41H8-6.jpg" alt="">
<img src="http://pic.jj20.com/up/allimg/1011/05241G14R6/1F524114R6-5.jpg" alt="">
<img src="http://pic1.win4000.com/wallpaper/9/548558d1b5f1e.jpg" alt="">
</body>

图片尽量多一点, 要不然动画吃五啊的一下就没了, 看不到

image.png

页面显示就是酱紫的 朴实无华 就是图片也忒大了 暂时不管

开始整主要目的, 实现图片加载时的动画, 明确给出一个加载的进度

嗯... 测试例子还是要用 jquery 的, 方便快捷

页面引入 jquery

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>

再写js代码

  $(function () {
    // 先获取所有 img 元素
    let img = $('img');
    // 使用一个变量存储 img 元素加载的个数
    let num = 0;
    // 循环 img 元素
    img.each((i) => {
        // 创建一个新的 image 元素
        let imgTarget = new Image();
        // 将循环到的 img 元素的 src 地址赋值给新建的图片元素
        imgTarget.src = img[i].src;
        // 监听新建图片元素使用指定src地址加载完成时的状态
        imgTarget.onload = () => {
            // 加载完成
            imgTarget.onload = null;
            // 将进度加一
            num++;
            // 打印到控制台看下进度
            console.log(num);
        }
    });
 });

image.png

我本地网络还可以, 慢的一批, 能看到加载进度一个一个的崩了出来

不过除了开发, 可没人看控制台, 需要在页面中展示一个加载进度, 继续改


  $(function () {
    // 创建一个loading的dom 添加到body中
    let loading = '<div class="loading"><div class="pic"><span></span><b>0%</b></div></div>';
    $('body').append(loading);
    
    // 先获取所有 img 元素
    let img = $('img');
    // 使用一个变量存储 img 元素加载的个数
    let num = 0;
    // 循环 img 元素
    img.each((i) => {
        // 创建一个新的 image 元素
        let imgTarget = new Image();
        // 将循环到的 img 元素的 src 地址赋值给新建的图片元素
        imgTarget.src = img[i].src;
        // 监听新建图片元素使用指定src地址加载完成时的状态
        imgTarget.onload = () => {
            // 加载完成
            imgTarget.onload = null;
            // 将进度加一
            num++;
            // 打印到控制台看下进度
            console.log(num);
            
            // 进度更新后 将进度设置到 loading 元素中
            $('.loading b').html(parseInt(num/$('img').length*100)+'%');
            if(num >=i ){
                $('.loading').fadeOut();
            }
        }
    });
 });

结果显示的还可以

a.gif

有点lo 后面在整改整改

完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
  </head>
<style>
*{
    border:0;
    padding:0;
    margin:0;
}
body{
    width:100%;height:100%;overflow-x:hidden;
}
.loading{
    width:100%;height:100%;position:fixed;top:0;left:0;background:white;z-index:100;
}
.loading .pic{
    width:100px;height:100px;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;font-size:20px;line-height:100px;text-align:center;
}
.loading .pic span{
    display:block;width:80px;height:80px;position:absolute;left:10px;top:10px;border-radius: 50%;box-shadow:0 2px 0 #333333;animation:rotate 1s infinite linear;-webkit-animation:rotate 1s infinite linear;
}

@keyframes rotate{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}
@-webkit-keyframes rotate{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}
</style>
  <body>
    <img src="http://p5.so.qhimgs1.com/t01e106d388b84446fb.jpg" alt="" />
    <img src="http://p1.so.qhimgs1.com/t0108345cd910aa2001.jpg" alt="" />
    <img src="http://p0.so.qhimgs1.com/t018af2fd529ffe9430.jpg" alt="" />
    <img src="http://p0.so.qhimgs1.com/t011b2ae72302c65c7c.jpg" alt="" />
    <img src="http://p4.so.qhimgs1.com/t0177195326fc99587a.jpg" alt="" />
    <img src="http://p1.so.qhimgs1.com/t013a13ff12fedabb0d.jpg" alt="" />
    <img src="http://p5.so.qhimgs1.com/t014613a93555dfb08b.jpg" alt="" />
    <img src="http://p5.so.qhimgs1.com/t01d0a776568aa414db.jpg" alt="" />
    <img src="http://p0.so.qhimgs1.com/t015d22c626cacabfc0.jpg" alt="" />
    <img src="http://p2.so.qhimgs1.com/t01e1560c65bc5a1d0e.jpg" alt="" />
    <img src="http://p1.so.qhimgs1.com/t01161a801f8f8dc64d.jpg" alt="" />
    <img src="http://p3.so.qhimgs1.com/t01ca9875d1b68564f3.jpg" alt="" />
    <img src="http://pic.jj20.com/up/allimg/1011/05241G14R6/1F524114R6-4.jpg" alt="" />
    <img src="http://pic1.win4000.com/wallpaper/a/595b27a628a22.jpg" alt="" />
    <img src="http://pic.jj20.com/up/allimg/1011/05241G14R6/1F524114R6-11.jpg" alt="" />
    <img src="http://pic1.win4000.com/wallpaper/a/568cd27741af5.jpg" alt="" />
    <img src="http://pic.jj20.com/up/allimg/1011/0FQG41H8/1FFQ41H8-6.jpg" alt="" />
    <img src="http://pic.jj20.com/up/allimg/1011/05241G14R6/1F524114R6-5.jpg" alt="" />
    <img src="http://pic1.win4000.com/wallpaper/9/548558d1b5f1e.jpg" alt="" />
  </body>
</html>
<script>
  $(function () {
    // 创建一个loading的dom 添加到body中
    let loading = '<div class="loading"><div class="pic"><span></span><b>0%</b></div></div>';
    $('body').append(loading);

    // 先获取所有 img 元素
    let img = $('img');
    // 使用一个变量存储 img 元素加载的个数
    let num = 0;
    // 循环 img 元素
    img.each((i) => {
        // 创建一个新的 image 元素
        let imgTarget = new Image();
        // 将循环到的 img 元素的 src 地址赋值给新建的图片元素
        imgTarget.src = img[i].src;
        // 监听新建图片元素使用指定src地址加载完成时的状态
        imgTarget.onload = () => {
            // 加载完成
            imgTarget.onload = null;
            // 将进度加一
            num++;
            // 打印到控制台看下进度
            console.log(num);

            // 进度更新后 将进度设置到 loading 元素中
            $('.loading b').html(parseInt(num/$('img').length*100)+'%');
            if(num >=i ){
                $('.loading').fadeOut();
            }
        }
    });
 });
</script>
avatar
文章
阅读
粉丝