1.4.1 • Published 8 years ago
ainojs-react-image v1.4.1
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.
1.4.1
8 years ago
1.4.0
8 years ago
1.3.4
9 years ago
1.3.3
9 years ago
1.3.2
9 years ago
1.2.6
9 years ago
1.3.1
9 years ago
1.3.0
9 years ago
1.2.5
9 years ago
1.2.4
9 years ago
1.2.3
9 years ago
1.2.2
9 years ago
1.2.1
9 years ago
1.2.0
9 years ago
1.1.10
9 years ago
1.1.9
9 years ago
1.1.8
9 years ago
1.1.7
9 years ago
1.1.6
9 years ago
1.1.5
9 years ago
1.1.4
9 years ago
1.1.3
9 years ago
1.1.2
9 years ago
1.1.1
9 years ago
1.1.0
9 years ago
1.0.11
9 years ago
1.0.10
9 years ago
1.0.9
9 years ago
1.0.8
9 years ago
1.0.7
9 years ago
1.0.6
9 years ago
1.0.5
9 years ago
1.0.4
9 years ago
1.0.3
9 years ago
1.0.2
9 years ago
1.0.1
9 years ago