Implement basic version of lazy loading

Author: Aljullu

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": ["env", "react"],
+  "plugins": [
+    "transform-object-rest-spread"
+  ]
+}

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+build
+package-lock.json

README.md

@@ -0,0 +1,4 @@
+React Lazy Load Image
+=====================
+
+React Component to lazy load images using a HOC to track window scroll position.

package.json

@@ -0,0 +1,44 @@
+{
+  "name": "react-lazy-load-image",
+  "version": "0.0.1",
+  "description": " React Component to lazy load images using a HOC to track window scroll position. ",
+  "main": "build/index.js",
+  "dependencies": {
+    "react": "^16.2.0"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.24.1",
+    "babel-core": "^6.26.0",
+    "babel-jest": "^22.4.0",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
+    "jest": "^22.4.0",
+    "path": "^0.12.7",
+    "react-dom": "^16.2.0",
+    "webpack": "^3.11.0"
+  },
+  "scripts": {
+    "test": "jest",
+    "start": "webpack --watch",
+    "build": "webpack"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Aljullu/react-lazy-load-image.git"
+  },
+  "keywords": [
+    "react",
+    "lazyloading"
+  ],
+  "author": {
+    "name": "Albert Juhé Lluveras",
+    "email": "contact@albertjuhe.com"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Aljullu/react-lazy-load-image/issues"
+  },
+  "homepage": "https://github.com/Aljullu/react-lazy-load-image#readme"
+}

src/components/LazyLoadImage.jsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { PropTypes } from 'prop-types';
+
+class LazyLoadImage extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      visible: false
+    }
+
+    this.previousBoundingBox = {
+      bottom: -1,
+      top: -1
+    };
+  }
+
+  componentDidMount() {
+    this.updateVisibility();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.updateVisibility(nextProps.scrollPosition);
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (this.refs.placeholder) {
+      const boundingBox = {
+        bottom: this.refs.placeholder.offsetTop +
+          this.refs.placeholder.offsetHeight,
+        top: this.refs.placeholder.offsetTop
+      };
+
+      if (this.previousBoundingBox.bottom !== boundingBox.bottom ||
+          this.previousBoundingBox.top !== boundingBox.top) {
+        this.updateVisibility();
+      }
+    }
+  }
+
+  updateVisibility(scrollPosition = this.props.scrollPosition) {
+    if (this.state.visible) {
+      return;
+    }
+
+    this.setState({
+      visible: this.refs.image ? true : this.isImageInViewport(scrollPosition)
+    });
+  }
+
+  isImageInViewport(scrollPosition) {
+    if (!this.refs.placeholder) {
+      return false;
+    }
+
+    const { threshold } = this.props;
+    const boundingBox = {
+      bottom: this.refs.placeholder.offsetTop +
+        this.refs.placeholder.offsetHeight,
+      top: this.refs.placeholder.offsetTop
+    };
+    const viewport = {
+      bottom: scrollPosition + window.innerHeight,
+      top: scrollPosition
+    };
+
+    this.previousBoundingBox = boundingBox;
+
+    return Boolean(viewport.top - threshold <= boundingBox.bottom &&
+      viewport.bottom + threshold >= boundingBox.top);
+  }
+
+  render() {
+    const { scrollPosition, threshold, ...props } = this.props;
+
+    if (!this.state.visible) {
+      const { className, height, width } = this.props;
+      return (
+        <span className={'lazy-load-image-placeholder ' + className}
+          ref="placeholder"
+          style={{height, width}}>
+        </span>
+      );
+    }
+
+    return (
+      <img
+        {...props}
+        ref="image" />
+    );
+  }
+}
+
+LazyLoadImage.propTypes = {
+  scrollPosition: PropTypes.number.isRequired,
+  className: PropTypes.string,
+  height: PropTypes.number,
+  threshold: PropTypes.number,
+  width: PropTypes.number
+};
+
+LazyLoadImage.defaultProps = {
+  className: '',
+  height: 0,
+  threshold: 100,
+  width: 0
+};
+
+export default LazyLoadImage;

src/components/LazyLoadImage.spec.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import ReactTestUtils from 'react-dom/test-utils';
+import assert from 'assert';
+
+import LazyLoadImage from './LazyLoadImage.jsx';
+
+const {
+  scryRenderedDOMComponentsWithClass,
+  scryRenderedDOMComponentsWithTag
+} = ReactTestUtils;
+
+describe('LazyLoadImage', function() {
+  function renderLazyLoadImage(scrollPosition) {
+    return ReactTestUtils.renderIntoDocument(
+      <LazyLoadImage
+        scrollPosition={scrollPosition}
+        src="" />
+    );
+  }
+
+  function expectImages(wrapper, numberOfImages) {
+    const img = scryRenderedDOMComponentsWithTag(wrapper, 'img');
+
+    expect(img.length).toEqual(numberOfImages);
+  }
+
+  function expectPlaceholders(wrapper, numberOfPlaceholders) {
+    const placeholder = scryRenderedDOMComponentsWithClass(wrapper,
+      'lazy-load-image-placeholder');
+
+    expect(placeholder.length).toEqual(numberOfPlaceholders);
+  }
+
+  it('renders the placeholder when it\'s not in the viewport', function() {
+    const lazyLoadImage = renderLazyLoadImage(-1000);
+
+    expectImages(lazyLoadImage, 0);
+    expectPlaceholders(lazyLoadImage, 1);
+  });
+
+  it('renders the image when it\'s in the viewport', function() {
+    const lazyLoadImage = renderLazyLoadImage(0);
+
+    expectImages(lazyLoadImage, 1);
+    expectPlaceholders(lazyLoadImage, 0);
+  });
+
+  it('renders the image when it appears in the viewport', function() {
+    const lazyLoadImage = renderLazyLoadImage(-1000);
+
+    lazyLoadImage.componentWillReceiveProps({scrollPosition: 0});
+
+    expectImages(lazyLoadImage, 1);
+    expectPlaceholders(lazyLoadImage, 0);
+  });
+});

src/hocs/trackWindowScroll.js

@@ -0,0 +1,42 @@
+import React from 'react';
+
+const trackWindowScroll = (BaseComponent) => {
+  class ScrollAwareComponent extends React.Component {
+    constructor(props) {
+      super(props);
+
+      this.state = {
+        scrollPosition: window.scrollY || window.pageYOffset
+      };
+    }
+
+    componentDidMount() {
+      window.addEventListener('scroll', this.onChangeScroll.bind(this));
+      window.addEventListener('resize', this.onChangeScroll.bind(this));
+    }
+
+    componentWillUnmount() {
+      window.removeEventListener('scroll', this.onChangeScroll.bind(this));
+      window.removeEventListener('resize', this.onChangeScroll.bind(this));
+    }
+
+    onChangeScroll() {
+      this.setState({
+        scrollPosition: window.scrollY || window.pageYOffset
+      });
+    }
+
+    render() {
+      return (
+        <BaseComponent
+          scrollPosition={this.state.scrollPosition}
+          {...this.props} />
+      );
+    }
+  }
+
+  return ScrollAwareComponent;
+};
+
+export default trackWindowScroll;
+

src/index.js

@@ -0,0 +1,2 @@
+export { default as LazyLoadImage } from './components/LazyLoadImage.jsx';
+export { default as trackWindowScroll } from './hocs/trackWindowScroll.js';

webpack.config.js

@@ -0,0 +1,27 @@
+var path = require('path');
+module.exports = {
+  entry: './src/index.js',
+  output: {
+    path: path.resolve(__dirname, 'build'),
+    filename: 'index.js',
+    libraryTarget: 'commonjs2'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        include: path.resolve(__dirname, 'src'),
+        exclude: /(node_modules|bower_components|build)/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['env']
+          }
+        }
+      }
+    ]
+  },
+  externals: {
+    'react': 'commonjs react'
+  }
+};