React图片懒加载 | 青训营笔记

用户2097355311992
499 阅读2分钟

准备优化一下在做的项目，首先便是图片懒加载，在这列一下方案

1 使用的react-lazyload库，它的确挺好用，但是我是轮播图，是横着的，通过调整父容器也无济于事，因为我的轮播图根本就不是滚动条滚动事件，而是用的js对图片进行的平移，所以这个方案放弃了

2 使用的IntersectionObserver，对data-src和src进行修改，最终可以实现路由懒加载，但是样式无法调整，只要给轮播图包一层dom图片懒加载直接失效，data-src无法动态赋值给src导致图片加载失败，而且这个还有一个问题，就是刷新图片直接加载失败，在useEffect钩子中给它包一层定时器，概率能加载出来，但是不好用，还是放弃了

3 使用的react-lazy-load-image-component库，可以说这个库非常好用，基本上直接贴上就能用 下面看代码

const items = imageArr.map((imageObj,index) => {
    return <Swiper.Item key={imageObj.id}>
        <div className='slideshow'>
        <LazyLoadImage
          className='banner-img-hide'
          alt="banner"
          threshold={0.75}
          src={imageObj.url}
          onLoad={awaitImg}
          />
          {/* 预加载下一张图片 */}
          <LazyLoadComponent>
            {index + 1 < imageArr.length && (
              <img src={imageArr[index + 1].url} style={{ display: 'none' }} alt="banner" />
            )}
          </LazyLoadComponent>
        </div>
        
    </Swiper.Item>
  })

还是非常好用的，下面介绍一下这个库和库的用法

react-lazy-load-image-component 库是一个用于实现图片懒加载的 React 组件。当网页中有大量的图片时，在用户浏览页面时，这些图片会占用大量的带宽和资源，从而导致页面加载缓慢。懒加载技术的应用可以解决这个问题。

要使用 react-lazy-load-image-component 库，需要在项目中安装该库并调用其提供的 LazyLoadImage 组件。以下是一些常见的选项和自定义方法：

  1. src: 要加载的图片的 URL。
  2. alt: 图片的描述性文本。
  3. effect: 当图片进入视口时应用的效果（例如淡入）。
  4. height: 图片的高度（以像素为单位）。
  5. width: 图片的宽度（以像素为单位）。
  6. threshold: 触发加载的阈值（在 0 到 1 之间）。
  7. placeholderSrc: 在加载图片之前显示的占位符图片的 URL。
  8. afterLoad: 图片加载完成后执行的回调函数。
  9. beforeLoad: 加载图片之前执行的回调函数。
  10. onError: 当图片加载失败时执行的回调函数。

除此之外，你可以使用 LazyLoadComponent 组件来异步地预加载图片。这个组件能够在需要时更快地呈现图片。

对于对象数组，可以使用 map 方法迭代所有对象，并为每个对象创建一个 LazyLoadImage 组件。然后，在每个 LazyLoadImage 组件之后，可以使用 LazyLoadComponent 组件来异步地预加载下一张图片。

总的来说，使用 react-lazy-load-image-component 库可以显著提高网页性能并减少资源消耗。它是一种非常实用和有效的技术，特别适用于那些包含大量图片的页面。

avatar
文章
阅读
粉丝