react-image-lazy-load

height={720}
onContentVisible={() => console.log('look ma I have been lazyloaded!')} originalSrc="http://apod.nasa.gov/apod/image/1502/ToadSky_Lane_1080_annotated.jpg" loaderImage={true} imageProps={{
src: require('../../images/ring.gif'),
alt: "ToadSky_Lane_1080_annotated.jpg",
ref: "image",
className: "image"
}} />

);
`

Props

$3

Type: Object Required: Yes

The imageProps is a required props for this plug-in to work. This can except any possible HTML attributes for img tag which also includes data attributes and React specific ref and className.

$3


Type: Boolean Default: false

The loaderImage is a Boolean prop to define if the image has to have a loader/placeholder image. If this set to true then prop originalSrc becomes required.

If loaderImage is set to true then loader/placeholder image can be set to 'src' attribute of imageProps prop.

$3


Type: String

originalSrc is useful when you want the image tag to be loaded first with any loader/placeholder image. This prop becomes required if prop loaderImage is set to true for the component. This expect the original image SRC which should replace the loader/placeholder image once original image gets loaded.

$3


Type: Boolean Default: true

addNoScript controls adding a noscript Tag to wrap the actual image so that it supports SEO requirements to inndex actual Images.

#### offset
Type: Number|String Default: 0

Aliases: threshold

The offset option allows you to specify how far below, above, to the left, and to the right of the viewport you want to _begin_ displaying your content. If you specify 0, your content will be displayed as soon as it is visible in the viewport, if you want to load _1000px_ below or above the viewport, use 1000.

#### offsetVertical
Type: Number|String Default: offset's value

The offsetVertical option allows you to specify how far above and below the viewport you want to _begin_ displaying your content.

#### offsetHorizontal
Type: Number|String Default: offset's value

The offsetHorizontal option allows you to specify how far to the left and right of the viewport you want to _begin_ displaying your contet.

#### offsetTop
Type: Number|String Default: offsetVertical's value

The offsetTop option allows you to specify how far above the viewport you want to _begin_ displaying your content.

#### offsetBottom
Type: Number|String Default: offsetVertical's value

The offsetBottom option allows you to specify how far below the viewport you want to _begin_ displaying your content.

#### offsetLeft
Type: Number|String Default: offsetVertical's value

The offsetLeft option allows you to specify how far to left of the viewport you want to _begin_ displaying your content.

#### offsetRight
Type: Number|String Default: offsetVertical's value

The offsetRight option allows you to specify how far to the right of the viewport you want to _begin_ displaying your content.

#### throttle
Type: Number|String Default: 250

The throttle is managed by an internal function that prevents performance issues from continuous firing of scroll events. Using a throttle will set a small timeout when the user scrolls and will keep throttling until the user stops. The default is 250 milliseconds.

#### debounce
Type: Boolean Default: true

By default the throttling function is actually a debounce function so that the checking function is only triggered after a user stops scrolling. To use traditional throttling where it will only check the loadable content every throttle milliseconds, set debounce to false.

$3


Type: String|Number Default: 100

This is used to set the elements height even when it has no content.

$3

Type Function`

A callback function to execute when the content appears on the screen.