2.1.3 • Published 4 years ago
react-image-to-lazyload v2.1.3
react-image-to-lazyload
安装
npm install react-image-to-lazyload -D
or
yarn add react-image-to-lazyload -D
Example(LazyWrapper):
import * as React from 'react';
import { LazyWrapper } from 'react-image-to-lazyload';
<LazyWrapper placeholder={loading}>
<img data-src={src} name="lazy" />
<img data-src={src} name="lazy" />
<img data-src={src} name="lazy" />
<img data-src={src} name="lazy" />
<img data-src={src} name="lazy" />
<img data-src={src} name="lazy" />
</LazyWrapper>;
Example(LazyItem):
import * as React from 'react';
import { LazyItem } from 'react-image-to-lazyload';
<LazyItem placeholder={loading} url={src}></LazyItem>;
url (require: true)
LazyItem 组件的图片路径
Type: string
data-src (require: true)
LazyWrapper 组件的图片路径
Type: string
name (require: true)
LazyWrapper 组件的 name: lazy
Type: string
placeholder?
默认图片
Type: string
errorImage?
图片报错显示
Type: string
onLoad?
LazyItem 组件图片加载后的回调
Type: () => void
options?
Type: ObserverOptions
IntersectionObserver options. https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options
style?
Type: React.CSSProperties
className?
Type: React.CSSProperties