Add CSS effects when the image becomes visible

Author: Aljullu

package.json

@@ -16,6 +16,7 @@
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
+    "css-loader": "^0.28.10",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "eslint": "^4.18.1",
@@ -26,6 +27,7 @@
     "path": "^0.12.7",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
+    "style-loader": "^0.20.2",
     "webpack": "^3.11.0"
   },
   "scripts": {

src/components/LazyLoadImage.jsx

@@ -6,51 +6,102 @@ import LazyLoadComponent from './LazyLoadComponent.jsx';
 class LazyLoadImage extends React.Component {
   constructor(props) {
     super(props);
+
+    this.state = {
+      loaded: false
+    };
   }
 
-  render() {
-    const { afterLoad, beforeLoad, delayMethod, delayTime, placeholder,
-      placeholderSrc, scrollPosition, threshold, visibleByDefault,
-      ...imgProps } = this.props;
+  onImageLoad() {
+    return () => {
+      this.props.afterLoad();
+
+      this.setState({
+        loaded: true
+      });
+    };
+  }
+
+  getImg() {
+    const { afterLoad, beforeLoad, delayMethod, delayTime, effect,
+      placeholder, placeholderSrc, scrollPosition, threshold,
+      visibleByDefault, ...imgProps } = this.props;
 
-    const lazyLoadComponent = (
+    return <img onLoad={this.onImageLoad()} {...imgProps} />;
+  }
+
+  getLazyLoadImage(image) {
+    const { beforeLoad, className, delayMethod, delayTime,
+      height, placeholder, scrollPosition, style, threshold,
+      visibleByDefault, width } = this.props;
+
+    return (
       <LazyLoadComponent
         beforeLoad={beforeLoad}
-        className={this.props.className}
+        className={className}
         delayMethod={delayMethod}
         delayTime={delayTime}
-        height={this.props.height}
+        height={height}
         placeholder={placeholder}
         scrollPosition={scrollPosition}
-        style={this.props.style}
+        style={style}
         threshold={threshold}
         visibleByDefault={visibleByDefault}
-        width={this.props.width}>
-        <img onLoad={afterLoad} {...imgProps} />
+        width={width}>
+        {image}
       </LazyLoadComponent>
     );
+  }
 
-    if (!placeholderSrc || visibleByDefault) {
-      return lazyLoadComponent;
-    }
+  getWrappedLazyLoadImage(lazyLoadImage) {
+    const { effect, height, placeholderSrc, width } = this.props;
+    const { loaded } = this.state;
+
+    const loadedClassName = loaded ?
+      ' lazy-load-image-loaded' :
+      '';
 
     return (
-      <span style={{
-        backgroundImage: 'url( ' + placeholderSrc + ')',
-        backgroundSize: '100% 100%',
-        color: 'transparent',
-        display: 'inline-block',
-        height: this.props.height,
-        width: this.props.width
-      }}>
-        {lazyLoadComponent}
+      <span
+        className={'lazy-load-image-background ' + effect + loadedClassName}
+        style={{
+          backgroundImage: 'url( ' + placeholderSrc + ')',
+          backgroundSize: '100% 100%',
+          color: 'transparent',
+          display: 'inline-block',
+          height: height,
+          width: width
+        }}>
+        {lazyLoadImage}
       </span>
     );
   }
+
+  render() {
+    const { effect, placeholderSrc, visibleByDefault } = this.props;
+    const { loaded } = this.state;
+
+    const image = this.getImg();
+    const lazyLoadImage = loaded ?
+      image : this.getLazyLoadImage(image);
+
+    if ((!effect && !placeholderSrc) || visibleByDefault) {
+      return lazyLoadImage;
+    }
+
+    return this.getWrappedLazyLoadImage(lazyLoadImage);
+  }
 }
 
 LazyLoadImage.propTypes = {
+  afterLoad: PropTypes.func,
+  effect: PropTypes.string,
   placeholderSrc: PropTypes.string
 };
 
+LazyLoadImage.defaultProps = {
+  afterLoad: () => ({}),
+  effect: ''
+};
+
 export default LazyLoadImage;

src/components/LazyLoadImage.spec.js

@@ -11,6 +11,7 @@ configure({ adapter: new Adapter() });
 const {
   findRenderedComponentWithType,
   findRenderedDOMComponentWithTag,
+  scryRenderedDOMComponentsWithClass,
   scryRenderedDOMComponentsWithTag,
   Simulate
 } = ReactTestUtils;
@@ -52,20 +53,44 @@ describe('LazyLoadImage', function() {
     expect(img.src).toEqual(props.src);
   });
 
-  it('calls afterLoad when img triggers onLoad', function() {
+  it('updates state and calls afterLoad when img triggers onLoad', function() {
     const afterLoad = jest.fn();
     const lazyLoadImage = mount(
-      <LazyLoadImage
-        afterLoad={afterLoad} />
+      <LazyLoadImage afterLoad={afterLoad} />
     );
 
     const img = findRenderedDOMComponentWithTag(lazyLoadImage.instance(), 'img');
 
     Simulate.load(img);
 
+    expect(lazyLoadImage.instance().state.loaded);
     expect(afterLoad).toHaveBeenCalledTimes(1);
   });
 
+  it('sets loaded class to wrapper when img triggers onLoad', function() {
+    const lazyLoadImage = mount(
+      <LazyLoadImage effect="blur" />
+    );
+
+    const img = findRenderedDOMComponentWithTag(lazyLoadImage.instance(), 'img');
+
+    Simulate.load(img);
+
+    const loadedWrapper = scryRenderedDOMComponentsWithClass(lazyLoadImage.instance(), 'lazy-load-image-loaded');
+
+    expect(loadedWrapper.length).toEqual(1);
+  });
+
+  it('adds the effect class', function() {
+    const lazyLoadImage = mount(
+      <LazyLoadImage effect="blur" />
+    );
+
+    const blurSpan = scryRenderedDOMComponentsWithClass(lazyLoadImage.instance(), 'blur');
+
+    expect(blurSpan.length).toEqual(1);
+  });
+
   it('doesn\'t render placeholder background when not defined', function() {
     const lazyLoadImage = mount(
       <LazyLoadImage />

src/effects/black-and-white.css

@@ -0,0 +1,17 @@
+.lazy-load-image-background.black-and-white {
+  filter: grayscale(1);
+}
+
+.lazy-load-image-background.black-and-white.lazy-load-image-loaded {
+  filter: grayscale(0);
+  transition: filter .3s;
+}
+
+.lazy-load-image-background.black-and-white > img {
+  opacity: 0;
+}
+
+.lazy-load-image-background.black-and-white.lazy-load-image-loaded > img {
+  opacity: 1;
+  transition: opacity .3s;
+}

src/effects/blur.css

@@ -0,0 +1,17 @@
+.lazy-load-image-background.blur {
+  filter: blur(15px);
+}
+
+.lazy-load-image-background.blur.lazy-load-image-loaded {
+  filter: blur(0);
+  transition: filter .3s;
+}
+
+.lazy-load-image-background.blur > img {
+  opacity: 0;
+}
+
+.lazy-load-image-background.blur.lazy-load-image-loaded > img {
+  opacity: 1;
+  transition: opacity .3s;
+}

src/effects/opacity.css

@@ -0,0 +1,9 @@
+.lazy-load-image-background.opacity {
+  background-image: none !important;
+  opacity: 0;
+}
+
+.lazy-load-image-background.opacity.lazy-load-image-loaded {
+  opacity: 1;
+  transition: opacity .3s;
+}

webpack.config.js

@@ -26,6 +26,10 @@ module.exports = {
             presets: ['env']
           }
         }
+      }, {
+        test: /\.css$/,
+        loaders: ['style-loader', 'css-loader'],
+        exclude: /node_modules/
       }
     ]
   },