Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit f3f92c7

Browse files
johnsonsuAljullu
andauthored
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 <aljullu@gmail.com> * Mark afterLoad as deprecated * Update test --------- Co-authored-by: Albert Juhé Lluveras <aljullu@gmail.com>
1 parent febeb78 commit f3f92c7

File tree

3 files changed

+18
-9
lines changed

3 files changed

+18
-9
lines changed

‎README.md‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ React Component to lazy load images and other components/elements. Supports Inte
2424
* A custom placeholder component or image can be specified.
2525
* Built-in on-visible effects (blur, black and white and opacity transitions).
2626
* threshold is set to 100px by default and can be modified.
27-
* `beforeLoad` and `afterLoad` events.
27+
* `beforeLoad` and `onLoad` events.
2828
* `debounce` and `throttle` included by default and configurable.
2929
* Uses IntersectionObserver for browsers that support it.
3030
* Server Side Rendering (SSR) compatible.
@@ -66,7 +66,8 @@ export default MyImage;
6666

6767
| Prop | Type | Default | Description |
6868
|:---|:---|:---|:---|
69-
| afterLoad | `Function` | | Function called after the image has been completely loaded. |
69+
| 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. |
70+
| afterLoad | `Function` | | Deprecated, use `onLoad` instead. This props is only for backward compatibility. |
7071
| beforeLoad | `Function` | | Function called right before the placeholder is replaced with the image element. |
7172
| delayMethod | `String` | `throttle` | Method from lodash to use to delay the scroll/resize events. It can be `throttle` or `debounce`. |
7273
| 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
188189
| Prop | Type | Default | Description |
189190
|:---|:---|:---|:---|
190191
| scrollPosition | `Object` | | Object containing `x` and `y` with the curent window scroll position. Required. |
191-
| afterLoad | `Function` | | Function called after the image has been rendered. |
192+
| 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. |
193+
| afterLoad | `Function` | | Deprecated, use `onLoad` instead. This props is only for backward compatibility. |
192194
| beforeLoad | `Function` | | Function called right before the image is rendered. |
193195
| placeholder | `ReactClass` | `<span>` | React element to use as a placeholder. |
194196
| threshold | `Number` | 100 | Threshold in pixels. So the image starts loading before it appears in the viewport. |

‎src/components/LazyLoadImage.jsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,10 @@ class LazyLoadImage extends React.Component {
1717
return null;
1818
}
1919

20-
return () => {
20+
return e => {
21+
// We keep support for afterLoad for backwards compatibility,
22+
// but `onLoad` is the preferred prop.
23+
this.props.onLoad(e);
2124
this.props.afterLoad();
2225

2326
this.setState({
@@ -44,7 +47,7 @@ class LazyLoadImage extends React.Component {
4447
...imgProps
4548
} = this.props;
4649

47-
return <img onLoad={this.onImageLoad()}{...imgProps} />;
50+
return <img {...imgProps}onLoad={this.onImageLoad()} />;
4851
}
4952

5053
getLazyLoadImage() {
@@ -146,7 +149,8 @@ class LazyLoadImage extends React.Component {
146149
}
147150

148151
LazyLoadImage.propTypes = {
149-
afterLoad: PropTypes.func,
152+
onLoad: PropTypes.func,
153+
afterLoad: PropTypes.func, // Deprecated, use onLoad instead
150154
beforeLoad: PropTypes.func,
151155
delayMethod: PropTypes.string,
152156
delayTime: PropTypes.number,
@@ -160,7 +164,8 @@ LazyLoadImage.propTypes = {
160164
};
161165

162166
LazyLoadImage.defaultProps = {
163-
afterLoad: () => ({}),
167+
onLoad: () => {},
168+
afterLoad: () => ({}), // Deprecated, use onLoad instead
164169
beforeLoad: () => ({}),
165170
delayMethod: 'throttle',
166171
delayTime: 300,

‎src/components/LazyLoadImage.spec.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,9 +67,10 @@ describe('LazyLoadImage', function() {
6767
expect(img.src).toEqual(props.src);
6868
});
6969

70-
it('updates state and calls afterLoad when img triggers onLoad', function() {
70+
it('updates state and calls onLoad and afterLoad when img triggers onLoad', function() {
7171
const afterLoad = jest.fn();
72-
const lazyLoadImage = mount(<LazyLoadImage afterLoad={afterLoad} />);
72+
const onLoad = jest.fn();
73+
const lazyLoadImage = mount(<LazyLoadImage onLoad={onLoad} afterLoad={afterLoad} />);
7374

7475
const img = findRenderedDOMComponentWithTag(
7576
lazyLoadImage.instance(),
@@ -80,6 +81,7 @@ describe('LazyLoadImage', function() {
8081

8182
expect(lazyLoadImage.instance().state.loaded);
8283
expect(afterLoad).toHaveBeenCalledTimes(1);
84+
expect(onLoad).toHaveBeenCalledTimes(1);
8385
});
8486

8587
it('sets loaded class to wrapper when img triggers onLoad', function() {

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /