zoukankan      html  css  js  c++  java
  • js图片列表百分比加载进度显示

    功能需求:加载多图片项目的时候,想提供一个loading页面,让用户知道加载进度。

    实现代码:

    import React, {useEffect, useState} from 'react';
    
    const imgLoad = ()=>{
    
        // 要加载的图片资源
        const picList = [
            'http://dummyimage.com/1000x1000/FF6611',
            'http://dummyimage.com/1000x1000/FF6622',
            'http://dummyimage.com/1000x1000/FF6633',
            'http://dummyimage.com/1000x1000/FF6644',
            'http://dummyimage.com/1000x1000/FF6655',
            'http://dummyimage.com/2000x2000/FF6666',
            'http://dummyimage.com/1000x1000/FF6677',
            'http://dummyimage.com/1000x1000/FF6688',
            'http://dummyimage.com/1000x1000/FF6699',
            'http://dummyimage.com/1000x1000/FF66AA',
            'http://dummyimage.com/1000x1000/FF66BB',
            'http://dummyimage.com/1000x1000/FF66CC',
        ];
    
        // 加载进度数值
        const [loadNum, setLoadNum] = useState(0);
        const [showPicList, setShowPicList] = useState([]);
    
        // 加载处理函数
        const loadFun = (arr=[], callback)=>{
            let len = 0;
            let num = 0;
            callback(0)
            for(let i = 0; i < arr.length; i++){
                (function(i){
                    const img = new Image();
                    img.src = arr[i];
                    img.onload = function(){
                        len ++;
                        num = parseInt((len / arr.length) * 100);
                        callback(num , len-1, img.src);
                    }
                })(i);
            }
        }
        
        useEffect(()=>{
            
            // 执行代码 
            loadFun(picList, (num, idx, src)=>{
                if(src){
                    showPicList.push(src);
                    setShowPicList(showPicList);
                    setLoadNum(num);
                }
            });
        
        },[]);
    
        return  <>
                    <div>加载进度:{loadNum}%</div>
                    <div style={{'200px'}}>
                        {
                            showPicList.map((item, index)=>{
                                return <img key={item} width="50px" src={item} alt={'图片_'+(index+1)}/>
                            })
                        }
                    </div>
                </>
    }
    
    export default imgLoad;
    View Code

    功能截图:

     

  • 相关阅读:
    springmvc视图解析
    mysql外键是多个id组成的字符串,查询方法
    mysql服务无法启动(1067错误)时数据备份的经验
    springboot(5) freemarker
    springboot(4) Log之Logbak
    springboot(3) junit单元测试
    集合类基础知识
    springboot(2) 数据库操作
    springboot(1)
    linux命令
  • 原文地址:https://www.cnblogs.com/zion0707/p/13851433.html
Copyright © 2011-2022 走看看