Fix passing onLoad overwrites, and call onLoad inside onImageLoad (#120)

* Fix onLoad overwrite and call onLoad

- Fix onLoad getting overwritten by props which cause `onImageLoad()` to never get called.
- preserve the functionality of `onLoad` by adding a callback.

* Attach event to afterLoad and update docs

* Update src/components/LazyLoadImage.jsx

Co-authored-by: Albert Juhé Lluveras <[email protected]>

* Mark afterLoad as deprecated

* Update test

---------

Co-authored-by: Albert Juhé Lluveras <[email protected]>

Author: johnsonsu

README.md

@@ -24,7 +24,7 @@ React Component to lazy load images and other components/elements. Supports Inte
 * A custom placeholder component or image can be specified.
 * Built-in on-visible effects (blur, black and white and opacity transitions).
 * threshold is set to 100px by default and can be modified.
-* `beforeLoad` and `afterLoad` events.
+* `beforeLoad` and `onLoad` events.
 * `debounce` and `throttle` included by default and configurable.
 * Uses IntersectionObserver for browsers that support it.
 * Server Side Rendering (SSR) compatible.
@@ -66,7 +66,8 @@ export default MyImage;
 
 | Prop | Type | Default | Description |
 |:---|:---|:---|:---|
-| afterLoad | `Function` |  | Function called after the image has been completely loaded. |
+| onLoad | `Function` |  | Function called when the image has been loaded. This is the same function as the `onLoad` of a `<img>` which contains an event object. |
+| afterLoad | `Function` |  | Deprecated, use `onLoad` instead. This props is only for backward compatibility. |
 | beforeLoad | `Function` |  | Function called right before the placeholder is replaced with the image element. |
 | 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. |
@@ -188,7 +189,8 @@ You must set the prop `scrollPosition` to the lazy load components. This way, th
 | Prop | Type | Default | Description |
 |:---|:---|:---|:---|
 | scrollPosition | `Object` |  | Object containing `x` and `y` with the curent window scroll position. Required. |
-| afterLoad | `Function` |  | Function called after the image has been rendered. |
+| onLoad | `Function` |  | Function called when the image has been loaded. This is the same function as the `onLoad` of a `<img>` which contains an event object. |
+| afterLoad | `Function` |  | Deprecated, use `onLoad` instead. This props is only for backward compatibility. |
 | beforeLoad | `Function` |  | Function called right before the image is rendered. |
 | placeholder | `ReactClass` | `<span>` | React element to use as a placeholder. |
 | threshold | `Number` | 100 | Threshold in pixels. So the image starts loading before it appears in the viewport. |

src/components/LazyLoadImage.jsx

@@ -17,7 +17,10 @@ class LazyLoadImage extends React.Component {
 			return null;
 		}
 
-		return () => {
+		return e => {
+			// We keep support for afterLoad for backwards compatibility,
+			// but `onLoad` is the preferred prop.
+			this.props.onLoad(e);
 			this.props.afterLoad();
 
 			this.setState({
@@ -44,7 +47,7 @@ class LazyLoadImage extends React.Component {
 			...imgProps
 		} = this.props;
 
-		return <img onLoad={this.onImageLoad()} {...imgProps} />;
+		return <img {...imgProps} onLoad={this.onImageLoad()} />;
 	}
 
 	getLazyLoadImage() {
@@ -146,7 +149,8 @@ class LazyLoadImage extends React.Component {
 }
 
 LazyLoadImage.propTypes = {
-	afterLoad: PropTypes.func,
+	onLoad: PropTypes.func,
+	afterLoad: PropTypes.func, // Deprecated, use onLoad instead
 	beforeLoad: PropTypes.func,
 	delayMethod: PropTypes.string,
 	delayTime: PropTypes.number,
@@ -160,7 +164,8 @@ LazyLoadImage.propTypes = {
 };
 
 LazyLoadImage.defaultProps = {
-	afterLoad: () => ({}),
+	onLoad: () => {},
+	afterLoad: () => ({}), // Deprecated, use onLoad instead
 	beforeLoad: () => ({}),
 	delayMethod: 'throttle',
 	delayTime: 300,

src/components/LazyLoadImage.spec.js

@@ -67,9 +67,10 @@ describe('LazyLoadImage', function() {
 		expect(img.src).toEqual(props.src);
 	});
 
-	it('updates state and calls afterLoad when img triggers onLoad', function() {
+	it('updates state and calls onLoad and afterLoad when img triggers onLoad', function() {
 		const afterLoad = jest.fn();
-		const lazyLoadImage = mount(<LazyLoadImage afterLoad={afterLoad} />);
+		const onLoad = jest.fn();
+		const lazyLoadImage = mount(<LazyLoadImage onLoad={onLoad} afterLoad={afterLoad} />);
 
 		const img = findRenderedDOMComponentWithTag(
 			lazyLoadImage.instance(),
@@ -80,6 +81,7 @@ describe('LazyLoadImage', function() {
 
 		expect(lazyLoadImage.instance().state.loaded);
 		expect(afterLoad).toHaveBeenCalledTimes(1);
+		expect(onLoad).toHaveBeenCalledTimes(1);
 	});
 
 	it('sets loaded class to wrapper when img triggers onLoad', function() {