Inject styles

Author: stereobooster

examples/basic/src/App.css

@@ -1,12 +1,3 @@
-.LazyLoad {
-  opacity: 0;
-  transition: all 2s ease-in-out;
-}
-
-.LazyLoad.is-visible {
-  opacity: 1;
-}
-
 .filler {
   height: 150px;
 }
@@ -16,3 +7,54 @@
   overflow: scroll;
   background-color: grey;
 }
+
+/* override default styles */
+.LazyLoad {
+  background: #ccc;
+}
+
+.LazyLoad img {
+  transition: all 2s ease-in-out;
+}
+
+.LazyLoad .spinner {
+  width: 40px;
+  height: 40px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -20px -20px 0 0;
+  background-color: #fff;
+  border-radius: 100%;
+  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
+  animation: sk-scaleout 1.0s infinite ease-in-out;
+}
+
+@-webkit-keyframes sk-scaleout {
+  0% { -webkit-transform: scale(0) }
+  100% {
+    -webkit-transform: scale(1.0);
+    opacity: 0;
+  }
+}
+
+@keyframes sk-scaleout {
+  0% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  } 100% {
+    -webkit-transform: scale(1.0);
+    transform: scale(1.0);
+    opacity: 0;
+  }
+}
+
+.LazyLoad .offline {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: no-repeat center center url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB4PSIwcHgiIHk9IjBweCI+PHBhdGggZD0iTTg4LjE3LDY5LjMyQTIyLDIyLDAsMCwwLDc3Ljc5LDM3Ljc3YTIyLDIyLDAsMCwwLTIxLjkxLTIwLjIsMjAuMjksMjAuMjksMCwwLDAtMTMuNjcsNC44MWw0LjU3LDUuM2ExMy4zMSwxMy4zMSwwLDAsMSw5LjEtMy4xMSwxNSwxNSwwLDAsMSwxNSwxNWMwLC4wNiwwLC4xMywwLC4xOXMwLC4yNiwwLC4zOWwtLjEsMi43NSwyLjY1Ljc1YTE1LDE1LDAsMCwxLDguNzksMjIuMVoiLz48cGF0aCBkPSJNMjguNzYsODBINjAuNDRWNzNIMjguNzZhMTUsMTUsMCwwLDEtMTUtMTVBMTcsMTcsMCwwLDEsMjMuNiw0Mi43bC0yLjc5LTYuNDJBMjMuOTEsMjMuOTEsMCwwLDAsNi43OCw1OCwyMiwyMiwwLDAsMCwyOC43Niw4MFoiLz48cmVjdCB4PSI0NS41MyIgeT0iLTQuNTgiIHdpZHRoPSI3IiBoZWlnaHQ9IjEwNi43NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIwLjE0IDQ4Ljk2KSByb3RhdGUoLTQ1KSIvPjwvc3ZnPgo=);
+  background-size: 100px 100px;
+}

src/LazyLoad.jsx

@@ -6,6 +6,9 @@ import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import parentScroll from './utils/parentScroll';
 import inViewport from './utils/inViewport';
+import injectCss from './utils/injectCSS';
+
+injectCss(window);
 
 export default class LazyLoad extends Component {
   constructor(props) {
@@ -125,10 +128,22 @@ export default class LazyLoad extends Component {
       onError: () => { this.setState({ errored: true }); },
     };
 
+    let content;
+
+    if (visible) {
+      if (loaded) {
+        content = React.cloneElement(children, props);
+      } else if (errored) {
+        content = offline;
+      } else {
+        content = [spinner, React.cloneElement(children, props)]
+      }
+    }
+
     return React.createElement(this.props.elementType, {
       className: elClasses,
       style: elStyles,
-    }, visible && [spinner, offline, React.cloneElement(children, props)] );
+    }, content);
   }
 }
 

src/utils/css.js

@@ -0,0 +1,20 @@
+export default `
+.LazyLoad img { opacity: 0; }
+.LazyLoad.is-loaded img { opacity: 1; }
+.LazyLoad {
+  position: relative;
+  height: 0;
+  padding-bottom: 75%;
+  overflow: hidden;
+}
+.LazyLoad iframe,
+.LazyLoad object,
+.LazyLoad embed,
+.LazyLoad video,
+.LazyLoad img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}`;

src/utils/injectCSS.js

@@ -0,0 +1,14 @@
+import cssRules from './css';
+
+const injectCSS = (window) => {
+  if (window && typeof window === 'object' && window.document) {
+    const { document } = window;
+    const head = (document.head || document.getElementsByTagName('head')[0]);
+
+    const styleElement = document.createElement('style');
+    styleElement.innerHTML = cssRules;
+    head.appendChild(styleElement);
+  }
+};
+
+export default injectCSS;