在加載圖像數組時反應加載微調器

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