我目前正在尝试使用 React 实现延迟加载图像组件。
我最初的解决方案是一个非常简单和基本的方法。I used Image API https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image并听了onload
event.
有一个处理此功能的 React hook 示例:
function useImage(src) {
const [loaded, setLoaded] = useState(false);
useEffect(() => {
if (!loaded) {
loadImage();
}
function loadImage() {
const img = new Image();
img.onload = () => setLoaded(true);
img.src = src;
}
});
return loaded;
}
React 组件的代码如下:
function LazyImage({ src, ...props }) {
const isLoaded = useImage(src);
return (
<div className="container">
{isLoaded ? (
<img src={src} {...props} />
) : (
<div className="preloader" />
)}
</div>
);
}
现在我想获得以下好处webp
format这是由我加载图像的 API 支持的。
虽然浏览器支持webp
format 没那么好 https://caniuse.com/#feat=webp,可以在 a 中提供图像<source />
标签和浏览器也将决定加载哪个图像<img />
将用作后备。
我的 React 组件已相应更新:
function LazyImage({ src, ...props }) {
const webpSrc = getWebpSrc(src);
const isLoaded = useImage(src);
return (
<div className="container">
{isLoaded ? (
<picture>
<source srcset={webpSrc} type="image/webp" />
<source srcset={src} type="image/jpeg" />
<img src={src} {...props} />
</picture>
) : (
<div className="preloader" />
)}
</div>
);
}
问题这是我还在听原版jpg
src 加载以显示图像。不幸的是我不能只是切换到听webp
src 就像在 Safari 这样的浏览器中它将无法加载...
也许我可以尝试加载这两个资源(webp
and jpg
)并行并在第一个解决时更新状态。然而,这感觉就像发出更多请求,而不是实际优化性能。
您认为这里的好方法是什么?或者我走错了方向?谢谢!