Question

我一直在尝试加载低分辨率图像和高分辨率（相同图像），显示低分辨率图像，然后加载高分辨率图像时将其换掉。

我的第一次尝试是在调用onload函数时更改src。这在除了firefox之外的所有浏览器上都运行得很好，它们在交换图像之间显示了短暂的闪光。

示例（反应代码）：

return <div>
    {this.state.hasLoaded ? 
        <img src={this.props.high}/> : 
        <img src={this.props.low}/>
    }
</div>

然后我尝试创建两个img标签。一个具有低res和一个具有高res。我将高分辨率图像放在低分辨率图像的顶部，然后让它们都加载。这似乎有效，但我错过了一些东西。我觉得我应该用不透明度，显示器或其他东西隐藏低分辨率图像，但我不知道为什么我需要。

return <div>
    <img className='image-high' src={this.props.high}/>
    <img className='image-low'  src={this.props.low}/>
</div>

任何帮助将不胜感激。

Answer 1

这是我使用的一个组件。它使用两个相互叠加的图像来模拟 lowsrc="" 属性。

function LowSrcImg(
    props: React.DetailedHTMLProps<
        React.ImgHTMLAttributes<HTMLImageElement>,
        HTMLImageElement
    > & { lowsrc: string }
) {
    return (
        <div style={{ position: "relative", width: "100%" }}>
            <div style={{ position: "absolute", top: 0, left: 0, width: "100%" }}>
                <img {...props} src={props.lowsrc} width="100%" height="auto" />
            </div>
            <div style={{ position: "relative", top: 0, left: 0, width: "100%" }}>
                <img {...props} width="100%" height="auto" />
            </div>
        </div>
    );
}

在低分辨率图像上叠加高分辨率图像

1 个答案: