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

【问题标题】：Overlay high resolution image over low resolution image在低分辨率图像上叠加高分辨率图像
【发布时间】：2017-08-23 05:32:09
【问题描述】：

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

我的第一次尝试是在调用 onload 函数时更改 src。这在所有浏览器上都非常有效，除了 firefox，它在交换图像之间显示了短暂的闪烁。

示例（反应代码）：

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

然后我尝试创建两个 img 标签。一个是低分辨率的，一个是高分辨率的。我将高分辨率图像放在低分辨率图像的顶部，然后让它们都加载。这似乎有效，但我错过了什么。我觉得我应该用不透明度、显示或其他方式隐藏低分辨率图像，但我不确定我为什么需要这样做。

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

任何帮助将不胜感激。

【问题讨论】：

为什么需要隐藏低分辨率图像？把高分辨率放在上面就行了，低分辨率看不到就不用隐藏了。
@MichaelCoker 是的，完全正确！
@MichaelCoker 好的。不知道为什么，但我很肯定有一些理由不这样做:)
没关系。但如果你愿意，你可以使用不透明度。虽然加载速度较慢...
@kjonsson 我看到的唯一问题是 1) 加载 2 张图像的性能，但这听起来对你来说不是一个问题，也不是这里的主题，2) 像屏幕一样的可访问性读者。大多数人只看到网页，所以只要低分辨率图像在视觉上被隐藏（另一张图像在顶部），这就是最重要的。用 CSS 隐藏它只会更明显地隐藏它，但它已经为 99% 的用户隐藏了。最后 1% 的人可能正在使用屏幕阅读器（如果他们是盲人或其他人），并且可能会阅读 2 张图片而不是 1 张图片的“alt”文本...

标签： html css

【解决方案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>
    );
}

【讨论】：