带有图片，源和img标签的惰性加载图像(webp，jpg)(反应) [英] Lazy load images (webp, jpg) with picture, source and img tags (React)

问题描述

我目前正在尝试用React实现一个延迟加载的图像组件.

I'm trying to implement a lazy-loading image component with React currently.

我最初的解决方案是一种非常简单且基本的方法. 我使用了 Image API 和收听了onload事件.

My original solution was a very simple and basic approach. I used Image API and listened to onload event.

有一个处理此功能的React钩子示例:

There is an example of React hook that was handling this functionality:

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组件的代码如下:

and code of the React component looked as follows:

function LazyImage({ src, ...props }) {
  const isLoaded = useImage(src);

  return (
    <div className="container">
      {isLoaded ? (
        <img src={src} {...props} />
      ) : (
        <div className="preloader" />
      )}
    </div>
  );
}

现在，我想获得webp格式的好处，该API在加载图像时受API支持.

Now I want to get the benefit of webp format which is supported by the API where I load the images.

尽管浏览器对webp格式的支持不是很好，但可以提供图像在<source />标签内，浏览器将决定加载哪个图像，同时<img />也将用作后备广告.

Though browser support of webp format is not that good, it's possible to provide images inside a <source /> tag and browser will decide which image to load, also <img /> will be used as a fallback.

我的React组件已相应更新:

My React component was updated accordingly:

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以便显示图像的问题.不幸的是，我不能仅仅像在Safari这样的浏览器中那样切换到监听webp src，它将无法加载...

The problem here is that I'm still listening to the original jpg src to load in order to display the image. Unfortunately I couldn't just switch to listening to webp src as in browsers like Safari it will fail to load...

可能我可以尝试并行加载两个资源(webp和jpg)，并在第一个解析时更新状态.但这就像发出更多请求，而不是实际优化性能.

Possibly I can try to load both resources (webp and jpg) in parallel and update the state when the first one resolves. However this feels like making more requests instead of optimizing performance actually.

您认为这里有什么好的方法?还是我走错了方向?谢谢！

What do you think would be a good approach here? Or am I going in a wrong direction? Thanks!

推荐答案

您可以使用IntersectionObserver Api.

You can use the IntersectionObserver Api.

首先加载一个占位符，当元素相交时，您可以使用所需的src切换占位符，这样，仅当元素在视图中时，才可以渲染图像

First load an placeholder, when the element is intersected you can switch your placeholder with your desired src, this way you can only render the image if the element is in view

路口观察员API

这篇关于带有图片，源和img标签的惰性加载图像(webp，jpg)(反应)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！