Fix images loading by default if they were descendants of positioned elements

Author: Aljullu

package.json

@@ -4,7 +4,8 @@
   "description": " React Component to lazy load images using a HOC to track window scroll position. ",
   "main": "build/index.js",
   "peerDependencies": {
-    "react": "^15.x.x || ^16.x.x"
+    "react": "^15.x.x || ^16.x.x",
+    "react-dom": "^15.x.x || ^16.x.x"
   },
   "devDependencies": {
     "babel-cli": "^6.24.1",
@@ -22,7 +23,6 @@
     "jest": "^22.4.0",
     "path": "^0.12.7",
     "react": "^16.2.0",
-    "react-dom": "^16.2.0",
     "webpack": "^3.11.0"
   },
   "scripts": {

src/components/LazyLoadImage.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import { PropTypes } from 'prop-types';
 
 class LazyLoadImage extends React.Component {
@@ -59,14 +60,19 @@ class LazyLoadImage extends React.Component {
     return false;
   }
 
-  getPlaceholderBoundingBox() {
+  getPlaceholderBoundingBox(scrollPosition = this.props.scrollPosition) {
+    const boundingRect = this.placeholder.getBoundingClientRect();
+    const style = ReactDOM.findDOMNode(this.placeholder).style;
+    const margin = {
+      left: parseInt(style.getPropertyValue('margin-left'), 10) || 0,
+      top: parseInt(style.getPropertyValue('margin-top'), 10) || 0
+    };
+
     return {
-      bottom: this.placeholder.offsetTop +
-        this.placeholder.offsetHeight,
-      left: this.placeholder.offsetLeft,
-      right: this.placeholder.offsetLeft +
-        this.placeholder.offsetWidth,
-      top: this.placeholder.offsetTop
+      bottom: scrollPosition.y + boundingRect.bottom + margin.top,
+      left: scrollPosition.x + boundingRect.left + margin.left,
+      right: scrollPosition.x + boundingRect.right + margin.left,
+      top: scrollPosition.y + boundingRect.top + margin.top
     };
   }
 
@@ -105,7 +111,7 @@ class LazyLoadImage extends React.Component {
     }
 
     const { threshold } = this.props;
-    const boundingBox = this.getPlaceholderBoundingBox();
+    const boundingBox = this.getPlaceholderBoundingBox(scrollPosition);
     const viewport = {
       bottom: scrollPosition.y + window.innerHeight,
       left: scrollPosition.x,
@@ -122,7 +128,7 @@ class LazyLoadImage extends React.Component {
   }
 
   getPlaceholder() {
-    const { className, height, placeholder, width } = this.props;
+    const { className, height, placeholder, style, width } = this.props;
 
     if (placeholder) {
       return React.cloneElement(placeholder,
@@ -132,7 +138,7 @@ class LazyLoadImage extends React.Component {
     return (
       <span className={'lazy-load-image-placeholder ' + className}
         ref={el => this.placeholder = el}
-        style={{ height, width }}>
+        style={{ height, width, ...style }}>
       </span>
     );
   }

src/components/LazyLoadImage.spec.js

@@ -14,18 +14,39 @@ describe('LazyLoadImage', function() {
       afterLoad = () => null,
       beforeLoad = () => null,
       placeholder = null,
-      scrollPosition = {x: 0, y: 0}
+      scrollPosition = {x: 0, y: 0},
+      style = {}
     } = {}) {
     return ReactTestUtils.renderIntoDocument(
       <LazyLoadImage
         afterLoad={afterLoad}
         beforeLoad={beforeLoad}
         placeholder={placeholder}
         scrollPosition={scrollPosition}
-        src="" />
+        src=""
+        style={style} />
     );
   }
 
+  function simulateScroll(lazyLoadImage, offsetX = 0, offsetY = 0) {
+    const myMock = jest.fn();
+
+    myMock.mockReturnValue({
+      bottom: -offsetY,
+      height: 0,
+      left: -offsetX,
+      right: -offsetX,
+      top: -offsetY,
+      width: 0
+    });
+
+    lazyLoadImage.placeholder.getBoundingClientRect = myMock;
+
+    lazyLoadImage.componentWillReceiveProps({
+      scrollPosition: {x: offsetX, y: offsetY}
+    });
+  }
+
   function expectImages(wrapper, numberOfImages) {
     const img = scryRenderedDOMComponentsWithTag(wrapper, 'img');
 
@@ -40,18 +61,21 @@ describe('LazyLoadImage', function() {
 
   it('renders the default placeholder when it\'s not in the viewport', function() {
     const lazyLoadImage = renderLazyLoadImage({
-      scrollPosition: {x: 0, y: -1000}
+      style: {marginTop: 100000}
     });
 
     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 style = {marginTop: 100000};
+    const placeholder = (
+      <span className="test-placeholder" style={style}></span>
+    );
     const lazyLoadImage = renderLazyLoadImage({
-      scrollPosition: {x: 0, y: -1000},
-      placeholder
+      placeholder,
+      style
     });
 
     expectImages(lazyLoadImage, 0);
@@ -66,22 +90,24 @@ describe('LazyLoadImage', function() {
   });
 
   it('renders the image when it appears in the viewport', function() {
+    const offset = 100000;
     const lazyLoadImage = renderLazyLoadImage({
-      scrollPosition: {x: 0, y: -1000}
+      style: {marginTop: offset}
     });
 
-    lazyLoadImage.componentWillReceiveProps({scrollPosition: {x: 0, y: 0}});
+    simulateScroll(lazyLoadImage, 0, offset);
 
     expectImages(lazyLoadImage, 1);
     expectPlaceholders(lazyLoadImage, 0);
   });
 
   it('renders the image when it appears in the viewport horizontally', function() {
+    const offset = 100000;
     const lazyLoadImage = renderLazyLoadImage({
-      scrollPosition: {x: -1000, y: 0}
+      style: {marginLeft: offset}
     });
 
-    lazyLoadImage.componentWillReceiveProps({scrollPosition: {x: 0, y: 0}});
+    simulateScroll(lazyLoadImage, offset, 0);
 
     expectImages(lazyLoadImage, 1);
     expectPlaceholders(lazyLoadImage, 0);
@@ -91,10 +117,10 @@ describe('LazyLoadImage', function() {
     const beforeLoad = jest.fn();
     const lazyLoadImage = renderLazyLoadImage({
       beforeLoad,
-      scrollPosition: {x: 0, y: -1000}
+      style: {marginTop: 100000}
     });
 
-        expect(beforeLoad).toHaveBeenCalledTimes(0);
+    expect(beforeLoad).toHaveBeenCalledTimes(0);
   });
 
   it('triggers beforeLoad when the image is in the viewport', function() {
@@ -108,12 +134,13 @@ describe('LazyLoadImage', function() {
 
   it('triggers beforeLoad when the image appears in the viewport', function() {
     const beforeLoad = jest.fn();
+    const offset = 100000;
     const lazyLoadImage = renderLazyLoadImage({
       beforeLoad,
-      scrollPosition: {x: 0, y: -1000}
+      style: {marginTop: offset}
     });
 
-    lazyLoadImage.componentWillReceiveProps({scrollPosition: {x: 0, y: 0}});
+    simulateScroll(lazyLoadImage, 0, offset);
 
     expect(beforeLoad).toHaveBeenCalledTimes(1);
   });
@@ -122,7 +149,7 @@ describe('LazyLoadImage', function() {
     const afterLoad = jest.fn();
     const lazyLoadImage = renderLazyLoadImage({
       afterLoad,
-      scrollPosition: {x: 0, y: -1000}
+      style: {marginTop: 100000}
     });
 
     expect(afterLoad).toHaveBeenCalledTimes(0);
@@ -139,12 +166,13 @@ describe('LazyLoadImage', function() {
 
   it('triggers afterLoad when the image appears in the viewport', function() {
     const afterLoad = jest.fn();
+    const offset = 100000;
     const lazyLoadImage = renderLazyLoadImage({
       afterLoad,
-      scrollPosition: {x: 0, y: -1000}
+      style: {marginTop: offset}
     });
 
-    lazyLoadImage.componentWillReceiveProps({scrollPosition: {x: 0, y: 0}});
+    simulateScroll(lazyLoadImage, 0, offset);
 
     expect(afterLoad).toHaveBeenCalledTimes(1);
   });