Add loadedImageProps prop

Author: Aljullu

README.md

@@ -70,6 +70,7 @@ export default MyImage;
 | delayMethod | `String` | `throttle` | Method from lodash to use to delay the scroll/resize events. It can be `throttle` or `debounce`. |
 | delayTime | `Number` | 300 | Time in ms sent to the delayMethod. |
 | effect | `String` |  | Name of the effect to use. Please, read next section with an explanation on how to use them. |
+| loadedImageProps | `Object` |  | Props passed to the `<img>` element once it's loaded. Useful to pass class names or style attributes that should only be applied once the image is loaded. |
 | placeholder | `ReactClass` | `<span>` | React element to use as a placeholder. |
 | placeholderSrc | `String` | | Image src to display while the image is not visible or loaded. |
 | threshold | `Number` | 100 | Threshold in pixels. So the image starts loading before it appears in the viewport. |

src/components/LazyLoadImage.jsx

@@ -28,10 +28,17 @@ class LazyLoadImage extends React.Component {
 
   getImg() {
     const { afterLoad, beforeLoad, delayMethod, delayTime, effect,
-      placeholder, placeholderSrc, scrollPosition, threshold,
+      loadedImageProps, placeholder, placeholderSrc, scrollPosition, threshold,
       visibleByDefault, wrapperClassName, ...imgProps } = this.props;
+    const { loaded } = this.state;
+    const loadedProps = loaded ? loadedImageProps : null;
 
-    return <img onLoad={this.onImageLoad()} {...imgProps} />;
+    return (
+      <img
+        onLoad={this.onImageLoad()}
+        {...imgProps}
+        {...loadedProps} />
+    );
   }
 
   getLazyLoadImage(image) {
@@ -105,6 +112,7 @@ LazyLoadImage.propTypes = {
   delayMethod: PropTypes.string,
   delayTime: PropTypes.number,
   effect: PropTypes.string,
+  loadedImageProps: PropTypes.object,
   placeholderSrc: PropTypes.string,
   threshold: PropTypes.number,
   visibleByDefault: PropTypes.bool,
@@ -117,6 +125,7 @@ LazyLoadImage.defaultProps = {
   delayMethod: 'throttle',
   delayTime: 300,
   effect: '',
+  loadedImageProps: {},
   placeholderSrc: '',
   threshold: 100,
   visibleByDefault: false,

src/components/LazyLoadImage.spec.js

@@ -99,6 +99,22 @@ describe('LazyLoadImage', function() {
     expect(loadedWrapper.style.getPropertyValue('background-size')).toEqual('');
   });
 
+  it('sets correct props to the loaded image', function() {
+    const lazyLoadImage = mount(
+      <LazyLoadImage className="lorem" loadedImageProps={{ className: 'ipsum' }} />
+    );
+
+    let img = findRenderedDOMComponentWithTag(lazyLoadImage.instance(), 'img');
+
+    expect(img.className).toEqual('lorem');
+
+    Simulate.load(img);
+
+    img = findRenderedDOMComponentWithTag(lazyLoadImage.instance(), 'img');
+
+    expect(img.className).toEqual('ipsum');
+  });
+
   it('adds the effect class', function() {
     const lazyLoadImage = mount(
       <LazyLoadImage effect="blur" />