使用 NativeLazy 记录

检测浏览器是否支持新 loading 属性. 把这个和 反应-截面-观测器 以倒置方法懒惰地加载图像.

检查 故事书 演示.

安装

yarn add @charlietango/use-native-lazy-loading

API 密码

const supported = useNativeLazyLoading(initialSupported)

示例

如何将此与 react-intersction-observer,以创建懒惰的加载图像.

import React from 'react'
import useNativeLazyLoading from '@charlietango/use-native-lazy-loading'
import { useInView } from 'react-intersection-observer'

const LazyImage = ({ width, height, src, ...rest }) => {
  const supportsLazyLoading = useNativeLazyLoading()
  const [ref, inView] = useInView({
    triggerOnce: true,
    skip: supportsLazyLoading !== false,
  })

  return (
    <div
      ref={ref}
      style={{
        position: 'relative',
        paddingBottom: `${(height / width) * 100}%`,
        background: '#2a4b7a',
      }}
    >
      {inView || supportsLazyLoading ? (
        <img
          {...rest}
          src={src}
          alt="Placeholder kitten"
          loading="lazy"
          style={{ position: 'absolute', width: '100%', height: '100%' }}
        />
      ) : null}
    </div>
  )
}

export default LazyImage