Question

我有一个React控件，可以渲染一堆图像。我的目标是避免因React加载图像的时间未知而引起的闪烁（是的，我知道嵌入式图像加载，让我们假装它暂时不存在）

我的课堂上有一个初始化的数组：

  this.loadedImages = [];

为此，我以这种方式使用onLoad：

render () {

        let items = this.props.images.map((value, index) => {

            let style = {};
            if (this.isImageLoaded(index))
                style = value.style;
            else
                style = {visibility: 'hidden'};

            return <img
                key={ index }
                onClick={ this.onClick }
                onLoad={ this.onLoad(index) }
                style={ style }
                src={ value.image }
                alt={ value.alt}/>
        });

        return (
            <div>
                 {items}
            </div>
        );
    }
}

我的onLoad和isImageLoaded看起来像这样：

onLoad = (index) => {

       if (!this.isImageLoaded(index)) {
           this.loadedImages.push(index);
       }
    };

isImageLoaded = (index) => {

        let isloaded = this.loadedImages.includes(index);
        if (isloaded)
            console.log(index + " is loaded!");
        else
            console.log(index + " is NOT loaded ");
        return isloaded;
    };

问题是，一旦我的页面加载，图像就会从“未加载”模式切换到“加载”模式-但是只有一个渲染器会在加载图像之前发生，因此{visibility: 'hidden'}样式保持不变。

因此，我的页面加载时没有图像。现在，即使我单击我的组件一次，图像也将正确显示，因为强制重新渲染该组件（因为现在已加载图像）。但是我没有办法从onLoad函数中以编程方式强制进行这种重新绘制，因为我收到警告，我不应该从render ...

我的问题是：一旦任何图像完成加载，如何解决鸡/蛋问题并重新渲染组件。

Answer 1

我建议将您的loadImages数据与其他图像状态（作为每个图像上的布尔标志）组合在一起，并在每次加载时使用setState更新它（您的头痛是由于这种分离，而事实是必须手动保持同步）。

然后使用诸如src之类的键在单个图像数组（包括加载状态）上进行映射。

反应：img onLoad和Chicken / Egg问题我无法逃脱

1 个答案: