Skip to content

meooxx/rc-lazyload-img

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react lazy load(preview!!)

feature

  • it leverages intersetion-observer Api w3c
  • ligthweigth and flexible script
  • jsx
  • outbox
  • client & server
  • background-img

pr welcome !!

install

npm i rc-lazyload-img
# or yarn add -D rc-lazyload-img
# react 15/16 required

usage

props type default des
src string 1*1 image(base64) as small as possible
dataBGImg string ' ' style.background-img = dataBGImg
holder string 1*1 image(base64) img element placeholder of img(as small as possible)
...ImgHTMLAttributes any any other <img / >'s propterty

demo online

   ...
  import LoadImg from 'rc-lazyload-img' 
  ...
  <LoadImg src='www.example.com/pic1.png' />
  <LoadImg dataBGImg="www.example.com/pic2.png" />
  <LoadImg 
    style={{styles}}
    dataBGImg="www.example.com/pic2.png" />
  <LoadImg 
    onError={handleOnError}
    dataBGImg="www.example.com/pic2.png" />
  ...