feat: lazyload images on scroll

See #4
homeferences · Mar 18, 2020 · 2b07f05 · 2b07f05
1 parent 1c01427
commit 2b07f05
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/src/components/BasicGrid.js b/src/components/BasicGrid.js
@@ -170,7 +170,8 @@ export const ConferenceItem = ({ conference }) => (
         {conference.image && (
           <Cover
             aspectRatio={2 / 1}
-            style={{ backgroundImage: `url(${conference.image})` }}
+            className="lazyload"
+            data-bg={conference.image}
           />
         )}
         {!conference.image ? <Placeholder aspectRatio={2 / 1} /> : ''}

diff --git a/src/html.js b/src/html.js
@@ -23,6 +23,16 @@ export default function HTML(props) {
         {props.postBodyComponents}
         <script src="https://unpkg.com/feather-icons"></script>
         <script>feather.replace();</script>
+        <script
+          async
+          src="https://afarkas.github.io/lazysizes/lazysizes.min.js"
+          crossorigin="anonymous"
+        ></script>
+        <script
+          async
+          src="https://afarkas.github.io/lazysizes/plugins/unveilhooks/ls.unveilhooks.min.js"
+          crossorigin="anonymous"
+        ></script>
       </body>
     </html>
   )