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

Posted 2023-03-05

【中文标题】在加载图像数组时反应加载微调器

【英文标题】：React Load Spinner While Array of Images Load

【发布时间】：2022-01-20 17:11:15

【问题描述】：

我有一个 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;

【问题讨论】：

它不工作 - 请解释这是什么意思...“不工作”可以是任何东西。

还有Please do not upload images of code/errors when asking a question.

为此，您需要一种与加载微调器不同的方法，您不会异步发出获取图像的请求，该请求实际上是在页面加载时发生的。当前的行为是什么，图像在屏幕上“绘制”需要一段时间？

@BrianThompson 抱歉，我会更改它。刷新页面时，我希望立即加载整个图像数组（它们是堆叠在一起的图像），但它们有点滴入。它不起作用，因为没有 Spinner 显示，我假设因为transformBodyOptions 在检查之前被调用并且总是不为null。

@BrettEast 一些图像层显示在其他图像之前，因为它们确实需要一些时间才能完全加载。什么样的方法最好？ Spinner 是不可能的吗？

【参考方案1】：

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

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

【讨论】：

我无法确定何时设置 doneLoading 状态，因为我在 pageLoad 上调用了一组图像，而不是像 apiCall 之类的东西

你知道根据给定的道具预期的图像数量吗？或者你是从某个地方加载它们？如果您知道，您可以将条件设​​置为 if images.length === expected_length

是的，我已经尝试过了，但仍然没有看到 Spinner 返回 ( this.state.pictureArray.length == 68 ? this.state.pictureArray : );