ainojs-react-image's Introduction

ainojs-react-image

Lazyloads responsive images based on resolution.

Plain image without lazy:

<ImageComponent src="http://galleria.io/static/i/s2013/2m.jpg" ratio={114/200} />

ratio can be omitted but is recomended or your component will not know it’s height until the image is loaded

Lazyload resolution-dependent image:

var images = {
  800: "http://galleria.io/static/i/s2013/2m.jpg", 
  200: "http://galleria.io/static/i/s2013/2s.jpg"
}

<ImageComponent src={images} lazy={true} ratio={114/200} alt="Snorkel" />

Run a function when the image has loaded and is displayed:

onImageLoad: function(imgElement) {
  console.log(imgElement)
}

[...]

<ImageComponent src={images} lazy={true} ratio={114/200} onLoad={this.onImageLoad} />

Run a function when the image fails to load (defaults to 3000ms, you can set timeout as prop)

onImageError: function(imgElement) {
  console.log('error', imgElement)
}

[...]

<ImageComponent src={images} lazy={true} ratio={114/200} onError={this.onImageError} />

All properties:

src (String or Object) Image source URL or an object of sizes and URLs (se above).
alt (String) Alt text for the generated <img> tag.
lazy (Boolean) Toggles lazy load.
ratio (Number) Sets the image ratio (height/width).
blendImage (String) Adds another blended image, useful for texture backgrounds.
blendMode (String) Sets image blend mode for browsers that supports it.
threshold (Number) Defines the amount of pixels below/above the screen for the image to show on lazy load.
onLoad (Function) Runs when the image has loaded. First argument is the image node.
onBeforeLoad (Function) Runs before this image starts loading.
onError (Function) Runs when the image has failed to load through timeout or http response. First argument is the image node.

Recommend Projects