Skip to content

shataniya/antd-lazyload

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

antd-lazyload
  • download:
npm i antd-lazyload --save
  • After downloading antd-lazyload, copy the components and css files in the folder to the project's src folder (or the components folder under src), so you can use it.
  • 下载antd-lazyload之后复制文件夹里的组件和css文件到项目的src文件夹下面(或者src下的components文件夹里),这样就可以使用了
  • If you did not download antd, Use as follows:
  • 如果没有下载antd,请按以下方式使用:
import LazyLoad from '...'
// Use as a component
<LazyLoad 
    state={{
        src: 'http://example.com/1.jpg',
        alt: '1.jpg',
        BoxClassName: 'example-box',
        ImgClassName: 'example-img'
    }}
></LazyLoad>
  • If you downloaded antd, Use as follows:
  • 如果您下载了antd,请按以下方式使用:
import AntdLazyLoad from '...'
// Use as a component
<AntdLazyLoad 
    state={{
        src: 'http://example.com/1.jpg',
        alt: '1.jpg',
        BoxClassName: 'example-box',
        ImgClassName: 'example-img'
    }}
></AntdLazyLoad>
  • There is also a component antdload, this component is not a lazy loading component, but it works well when the number of loaded images is not large, If you want to use the component antdload, Use as follows:
import AntdLoad from '...'
// Use as a component
<AntdLaod 
    state={{
        src: 'http://example.com/1.jpg',
        alt: '1.jpg',
        BoxClassName: 'example-box',
        ImgClassName: 'example-img'
    }}
></AntdLoad>
  • Passing parameters to component through state
  • 通过state将参数传递给组件
param attributes defaultValue description
state src The address of the image that needs to be lazy loaded
alt antd-lazyload alt of img
width Container width (容器的宽度)
height Container height (容器的高度)
BoxClassName lazyload-img-box Container class name (容器的类名)
BoxStyle Container styles (容器的样式)
ImgClassName lazyload-img Image class name (img标签的类名)
ImgStyle Image styles (img标签的样式)

About

A lazy image loading component based on React, you can also use antd

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published