Add visibleByDefault prop

Author: Aljullu

README.md

@@ -70,6 +70,7 @@ export default trackWindowScroll(Gallery);
 | beforeLoad | `Function` | Function called right before the image is rendered. |
 | placeholder | `ReactClass` | A React element to use as a placeholder. |
 | threshold | `Number` | Threshold in pixels. So the image starts loading before it appears in the viewport. _Defaults to 100._ |
+| visibleByDefault | `Boolean` | Whether the image must be visible from the beginning. |
 | ... |  | Any other image attribute |
 
 

src/components/LazyLoadImage.jsx

@@ -6,9 +6,16 @@ class LazyLoadImage extends React.Component {
   constructor(props) {
     super(props);
 
+    const { afterLoad, beforeLoad, visibleByDefault } = this.props;
+
     this.state = {
-      visible: false
+      visible: visibleByDefault
     };
+
+    if (visibleByDefault) {
+      beforeLoad();
+      afterLoad();
+    }
   }
 
   componentDidMount() {
@@ -27,7 +34,8 @@ class LazyLoadImage extends React.Component {
       beforeLoad: true,
       placeholder: true,
       threshold: true,
-      scrollPosition: true
+      scrollPosition: true,
+      visibleByDefault: true
     };
 
     return keys.filter(key => !propsToIgnoreAfterVisible[key]);
@@ -125,7 +133,7 @@ class LazyLoadImage extends React.Component {
 
   render() {
     const { afterLoad, beforeLoad, placeholder, scrollPosition, threshold,
-      ...props } = this.props;
+      visibleByDefault, ...props } = this.props;
 
     return this.state.visible ?
       <img {...props} /> :
@@ -144,6 +152,7 @@ LazyLoadImage.propTypes = {
   height: PropTypes.number,
   placeholder: PropTypes.element,
   threshold: PropTypes.number,
+  visibleByDefault: PropTypes.bool,
   width: PropTypes.number
 };
 
@@ -154,6 +163,7 @@ LazyLoadImage.defaultProps = {
   height: 0,
   placeholder: null,
   threshold: 100,
+  visibleByDefault: false,
   width: 0
 };
 

src/components/LazyLoadImage.spec.js

@@ -18,7 +18,8 @@ describe('LazyLoadImage', function() {
       beforeLoad = () => null,
       placeholder = null,
       scrollPosition = {x: 0, y: 0},
-      style = {}
+      style = {},
+      visibleByDefault = false
     } = {}) {
     return mount(
       <LazyLoadImage
@@ -27,7 +28,8 @@ describe('LazyLoadImage', function() {
         placeholder={placeholder}
         scrollPosition={scrollPosition}
         src=""
-        style={style} />
+        style={style}
+        visibleByDefault={visibleByDefault} />
     );
   }
 
@@ -116,6 +118,16 @@ describe('LazyLoadImage', function() {
     expectPlaceholders(lazyLoadImage, 0);
   });
 
+  it('renders the image when it\'s not in the viewport but visibleByDefault is true', function() {
+    const lazyLoadImage = renderLazyLoadImage({
+      style: {marginTop: 100000},
+      visibleByDefault: true
+    });
+
+    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({
@@ -148,6 +160,18 @@ describe('LazyLoadImage', function() {
     expect(beforeLoad).toHaveBeenCalledTimes(1);
   });
 
+  it('triggers beforeLoad when visibleByDefault is true', function() {
+    const beforeLoad = jest.fn();
+    const offset = 100000;
+    const lazyLoadImage = renderLazyLoadImage({
+      beforeLoad,
+      style: {marginTop: offset},
+      visibleByDefault: true
+    });
+
+    expect(beforeLoad).toHaveBeenCalledTimes(1);
+  });
+
   it('doesn\'t trigger afterLoad when the image is not the viewport', function() {
     const afterLoad = jest.fn();
     const lazyLoadImage = renderLazyLoadImage({
@@ -179,4 +203,16 @@ describe('LazyLoadImage', function() {
 
     expect(afterLoad).toHaveBeenCalledTimes(1);
   });
+
+  it('triggers afterLoad when visibleByDefault is true', function() {
+    const afterLoad = jest.fn();
+    const offset = 100000;
+    const lazyLoadImage = renderLazyLoadImage({
+      afterLoad,
+      style: {marginTop: offset},
+      visibleByDefault: true
+    });
+
+    expect(afterLoad).toHaveBeenCalledTimes(1);
+  });
 });