在加载图像数组时反应加载微调器

Question

我有一个 img src 标签数组，当我传递 itemName 时动态设置，如图所示，然后渲染整个数组。 我想显示一个 Spinner，直到所有图像都完成加载，但是当前行为是在刷新或初始加载期间，一些图层在其他图层加载之前加载，其他图层需要一些时间才能完全加载并且没有 Spinner 显示。

我想一次显示完整的图像数组，而不是显示一些图层并观看加载过程。 我没有进行任何 API 调用，只是查找位于我的项目结构中的图像的路径。 任何帮助，将不胜感激。

class BodyOption extends Component {
    constructor(props) {
        super(props);
    }

    render() {    

        let option = null; // initial state
        var wantedOption = this.props.itemName;
        var optionCategory = this.props.optionCategory;
        optionCategory = optionCategory.replace(/ /g, "");
    
        var fileName = optionCategory+"_"+wantedOption+".png";

        try {

            option =  
                <div key={optionCategory} className={classes.Layer}>
                   <img src {require(`../../../assets/images/${optionCategory}/${fileName}`).default} alt={wantedOption}/>   
                 </div>
         } catch (err) {
            option = null
         }  

         return option;
    }
};
export default BodyOption;

import Spinner from '../UI/Spinner/Spinner';
import ClassicBodyOption from './ClassicOptions/ClassicBodyOption';
const classes = require('./Classic.module.css');

class Classic extends Component {
    constructor(props) {
        super(props);
    }
    
    render() { 
        let  var transformedClassicBodyOptions = Object.keys(this.props.classicBodyOptions)
        .map(igKey => {
            return Object.keys(this.props.classicBodyOptions[igKey] ).map(realKey => {   
                return [...Array((this.props.classicBodyOptions[igKey][realKey] ))].map( 
                    (itemName, i) =>  {
                        const keyName = realKey.replace(/ /g, "");
                        return <BodyOption 
                            key={keyName + i} 
                            optionCategory={realKey}
                            itemName={itemName}
                           />;
                    });       
            });
        })
        .reduce((prevVal, currVal) => { // this just flattens array
            return prevVal.concat(currVal); 
        }, [  ]);

            return (

                    <div className={classes.Classic}>
                        {transformedClassicBodyOptions}
                    </div>
            );
    }  
}
export default Classic;

Answer 1

检查 state 并显示基于 state 的内容的条件。 当您拥有所有图片时，只需设置 this.state.doneLoading。

render() {
    return <div>
    { this.state.doneLoading
        ? <ImagesComponent/>
        : <LoadingSpinnerComponent/>
    }
    </div>
}