Add beforeLoad and afterLoad callbacks

Author: Aljullu

src/components/LazyLoadImage.jsx

@@ -23,7 +23,7 @@ class LazyLoadImage extends React.Component {
     this.updateVisibility(nextProps.scrollPosition);
   }
 
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate() {
     if (this.refs.placeholder) {
       const boundingBox = {
         bottom: this.refs.placeholder.offsetTop +
@@ -43,9 +43,15 @@ class LazyLoadImage extends React.Component {
       return;
     }
 
+    if (!this.isImageInViewport(scrollPosition)) {
+      return;
+    }
+
+    this.props.beforeLoad();
+
     this.setState({
-      visible: this.refs.image ? true : this.isImageInViewport(scrollPosition)
-    });
+      visible: true
+    }, this.props.afterLoad);
   }
 
   isImageInViewport(scrollPosition) {
@@ -85,7 +91,8 @@ class LazyLoadImage extends React.Component {
   }
 
   render() {
-    const { placeholder, scrollPosition, threshold, ...props } = this.props;
+    const { afterLoad, beforeLoad, placeholder, scrollPosition, threshold,
+      ...props } = this.props;
 
     if (!this.state.visible) {
       return this.getPlaceholder();
@@ -101,6 +108,8 @@ class LazyLoadImage extends React.Component {
 
 LazyLoadImage.propTypes = {
   scrollPosition: PropTypes.number.isRequired,
+  afterLoad: PropTypes.func,
+  beforeLoad: PropTypes.func,
   className: PropTypes.string,
   height: PropTypes.number,
   placeholder: PropTypes.element,
@@ -109,6 +118,8 @@ LazyLoadImage.propTypes = {
 };
 
 LazyLoadImage.defaultProps = {
+  afterLoad: () => null,
+  beforeLoad: () => null,
   className: '',
   height: 0,
   placeholder: null,

src/components/LazyLoadImage.spec.js

@@ -10,9 +10,16 @@ const {
 } = ReactTestUtils;
 
 describe('LazyLoadImage', function() {
-  function renderLazyLoadImage(scrollPosition = 0, placeholder = null) {
+  function renderLazyLoadImage({
+      afterLoad = () => null,
+      beforeLoad = () => null,
+      placeholder = null,
+      scrollPosition = 0
+    } = {}) {
     return ReactTestUtils.renderIntoDocument(
       <LazyLoadImage
+        afterLoad={afterLoad}
+        beforeLoad={beforeLoad}
         placeholder={placeholder}
         scrollPosition={scrollPosition}
         src="" />
@@ -32,15 +39,20 @@ describe('LazyLoadImage', function() {
   }
 
   it('renders the default placeholder when it\'s not in the viewport', function() {
-    const lazyLoadImage = renderLazyLoadImage(-1000);
+    const lazyLoadImage = renderLazyLoadImage({
+      scrollPosition: -1000
+    });
 
     expectImages(lazyLoadImage, 0);
     expectPlaceholders(lazyLoadImage, 1);
   });
 
   it('renders the prop placeholder when it\'s not in the viewport', function() {
     const placeholder = <span className="test-placeholder"></span>;
-    const lazyLoadImage = renderLazyLoadImage(-1000, placeholder);
+    const lazyLoadImage = renderLazyLoadImage({
+      scrollPosition: -1000,
+      placeholder
+    });
 
     expectImages(lazyLoadImage, 0);
     expectPlaceholders(lazyLoadImage, 1, 'test-placeholder');
@@ -54,11 +66,75 @@ describe('LazyLoadImage', function() {
   });
 
   it('renders the image when it appears in the viewport', function() {
-    const lazyLoadImage = renderLazyLoadImage(-1000);
+    const lazyLoadImage = renderLazyLoadImage({
+      scrollPosition: -1000
+    });
 
     lazyLoadImage.componentWillReceiveProps({scrollPosition: 0});
 
     expectImages(lazyLoadImage, 1);
     expectPlaceholders(lazyLoadImage, 0);
   });
+
+  it('doesn\'t trigger beforeLoad when the image is not the viewport', function() {
+    const beforeLoad = jest.fn();
+    const lazyLoadImage = renderLazyLoadImage({
+      beforeLoad,
+      scrollPosition: -1000
+    });
+
+        expect(beforeLoad).toHaveBeenCalledTimes(0);
+  });
+
+  it('triggers beforeLoad when the image is in the viewport', function() {
+    const beforeLoad = jest.fn();
+    const lazyLoadImage = renderLazyLoadImage({
+      beforeLoad
+    });
+
+    expect(beforeLoad).toHaveBeenCalledTimes(1);
+  });
+
+  it('triggers beforeLoad when the image appears in the viewport', function() {
+    const beforeLoad = jest.fn();
+    const lazyLoadImage = renderLazyLoadImage({
+      beforeLoad,
+      scrollPosition: -1000
+    });
+
+    lazyLoadImage.componentWillReceiveProps({scrollPosition: 0});
+
+    expect(beforeLoad).toHaveBeenCalledTimes(1);
+  });
+
+  it('doesn\'t trigger afterLoad when the image is not the viewport', function() {
+    const afterLoad = jest.fn();
+    const lazyLoadImage = renderLazyLoadImage({
+      afterLoad,
+      scrollPosition: -1000
+    });
+
+    expect(afterLoad).toHaveBeenCalledTimes(0);
+  });
+
+  it('triggers afterLoad when the image is in the viewport', function() {
+    const afterLoad = jest.fn();
+    const lazyLoadImage = renderLazyLoadImage({
+      afterLoad
+    });
+
+    expect(afterLoad).toHaveBeenCalledTimes(1);
+  });
+
+  it('triggers afterLoad when the image appears in the viewport', function() {
+    const afterLoad = jest.fn();
+    const lazyLoadImage = renderLazyLoadImage({
+      afterLoad,
+      scrollPosition: -1000
+    });
+
+    lazyLoadImage.componentWillReceiveProps({scrollPosition: 0});
+
+    expect(afterLoad).toHaveBeenCalledTimes(1);
+  });
 });