feat(LazyLoadImages): Responsive image takes eager=true

Author: gja

README.md

@@ -209,6 +209,8 @@ import { LazyCollection } from '@quintype/components'
 
 This component will ensure all [ResponsiveImages](#ResponsiveImage) that are in its descendent path will be loaded async. By default, the image is loaded with an empty gif, and the image becomes visible when the image scrolls 250 from the edge of the screen.
 
+You can use `eager={true}` to force the image to be eager
+
 ```javascript
 import { LazyLoadImages } from '@quintype/components';
 
@@ -218,7 +220,9 @@ function LazyLoadSecondImage() {
     <LazyLoadImages margin={50}>
       <div>
         <UnrelatedContent/>
-        <ResponsiveImage slug={props["lazy-image"]} />
+        <ResponsiveImage slug={props["lazy-image-1"]} />
+        <ResponsiveImage slug={props["lazy-image-forced-to-be-eager"]} eager={true}/>
+        <ResponsiveImage slug={props["lazy-image-2"]} />
       </div>
     </LazyLoadImages>
     <ResponsiveImage slug={props["eager-image-2"]} />

src/components/responsive-image.js

@@ -5,7 +5,7 @@ import {func} from 'prop-types';
 import omit from 'lodash/omit';
 import emptyWebGif from 'empty-web-gif';
 
-const USED_PARAMS = ["imageCDN","defaultWidth","widths","imgParams","slug","metadata","aspectRatio", "reactTag"];
+const USED_PARAMS = ["imageCDN","defaultWidth","widths","imgParams","slug","metadata","aspectRatio", "reactTag", "eager"];
 
 // Add the following CSS somewhere: img.qt-image { width: 100%; object-fit: cover; }
 
@@ -43,10 +43,20 @@ export class ResponsiveImageBase extends React.Component {
 
     super(props, context);
     this.state = {
-      showImage: !context.lazyLoadObserveImage
+      showImage: !this.shouldLazyLoad()
     }
   }
 
+  shouldLazyLoad() {
+    if (this.props.eager) {
+      return false;
+    }
+    if (this.context.lazyLoadObserveImage && this.context.lazyLoadUnobserveImage) {
+      return true;
+    }
+    return false;
+  }
+
   render() {
     const imageProps = this.state.showImage ? responsiveProps(this.props) : {src: emptyWebGif};
     return React.createElement(this.props.reactTag || "img", Object.assign(imageProps, omit(this.props, USED_PARAMS), {
@@ -56,11 +66,11 @@ export class ResponsiveImageBase extends React.Component {
   }
 
   componentDidMount() {
-    this.context.lazyLoadObserveImage && this.context.lazyLoadObserveImage(this.dom, this);
+    this.shouldLazyLoad() && this.context.lazyLoadObserveImage(this.dom, this);
   }
 
   componentWillUnmount() {
-    this.context.lazyLoadUnobserveImage && this.context.lazyLoadUnobserveImage(this.dom, this);
+    this.shouldLazyLoad() && this.context.lazyLoadUnobserveImage(this.dom, this);
   }
 
   showImage() {