ainojs-react-image
v1.4.1
Published
Lazy image component
Downloads
22
Readme
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.