Implement lazy load

default.hbs

@@ -54,9 +54,9 @@
     {{> footer}}
 
     {{!-- Common scripts shared between pages --}}
+    <script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver%2CPromise%2CArray.prototype.includes%2CString.prototype.endsWith%2CString.prototype.startsWith%2CObject.assign%2CNodeList.prototype.forEach"></script>
     <script defer src="https://unpkg.com/@tryghost/[email protected]/umd/content-api.min.js"></script>
     <script defer src="{{asset "js/manifest.js"}}"></script>
-    <script defer src="{{asset "js/polyfill.js"}}"></script>
     <script defer src="{{asset "js/vendor.js"}}"></script>
     <script defer src="{{asset "js/app.js"}}"></script>
 

index.hbs

@@ -40,7 +40,7 @@ into the {body} of the default.hbs template --}}
                     {{/if}}
                     <div class="m-featured-article__picture">
                       {{#if feature_image}}
-                      <div style="background-image: url({{feature_image}});"></div>
+                      <div class="lozad" data-background-image="{{feature_image}}"></div>
                       {{/if}}
                     </div>
                     <div class="m-featured-article__meta">

page-authors.hbs

@@ -28,10 +28,9 @@ into the {body} of the default.hbs template --}}
             {{#foreach authors}}
             <article class="m-article-card as-author">
               {{#if profile_image}}
-              <div class="m-article-card__picture" style="background-image: url({{profile_image}})">
+              <div class="m-article-card__picture lozad" data-background-image="{{profile_image}}">
                 {{else}}
-                <div class="m-article-card__picture"
-                  style="background-image: url({{asset "images/default-avatar-rectangle.jpg"}})">
+                <div class="m-article-card__picture lozad" data-background-image="{{asset "images/default-avatar-rectangle.jpg"}}">
                   {{/if}}
                   <a href="{{url}}" class="m-article-card__picture-link" aria-label="Author"></a>
                   <h3 class="m-article-card__name">{{name}}</h3>

partials/loop.hbs

@@ -6,7 +6,7 @@
   {{/is}}
   {{#if feature_image}}
     <article class="m-article-card {{post_class}}">
-      <div class="m-article-card__picture" style="background-image: url({{feature_image}});">
+      <div class="m-article-card__picture lozad" data-background-image="{{feature_image}}">
   {{else}}
     <article class="m-article-card no-picture {{post_class}}">
       <div class="m-article-card__picture">

partials/navigation.hbs

@@ -37,9 +37,9 @@ Also it includes the big submenu.
                   <a href="{{url}}" class="m-recent-article">
                     <div class="m-recent-article__picture">
                       {{#if feature_image}}
-                        <div style="background-image: url({{img_url feature_image size="m"}});"></div>
+                        <div class="lozad" data-background-image="{{img_url feature_image size="m"}}"></div>
                       {{else}}
-                        <div style="background-image: url({{asset "images/no-image.png"}});" class="no-image"></div>
+                        <div class="no-image lozad" data-background-image="{{asset "images/no-image.png"}}"></div>
                       {{/if}}
                     </div>
                     <h3 class="m-recent-article__title">{{title}}</h3>

src/js/app.js

@@ -1,17 +1,20 @@
 import cssVars from 'css-vars-ponyfill'
 import $ from 'jquery'
+import lozad from 'lozad'
 import Headroom from "headroom.js"
 import slick from 'slick-carousel'
 import tippy from 'tippy.js'
 import AOS from 'aos'
 import Fuse from 'fuse.js'
+import {
+  isRTL,
+  formatDate
+} from './helpers'
 
 cssVars({})
 
 $(document).ready(() => {
-  const isRTL = $('html').attr('lang') === 'ar' || $('html').attr('lang') === 'he'
-
-  if (isRTL) {
+  if (isRTL()) {
     $('html').attr('dir', 'rtl').addClass('rtl')
   }
 
@@ -95,21 +98,6 @@ $(document).ready(() => {
       })
   }
 
-  function formatDate(date) {
-    if (date) {
-      return new Date(date).toLocaleDateString(
-        document.documentElement.lang,
-        {
-          year: 'numeric',
-          month: 'long',
-          day: 'numeric'
-        }
-      )
-    }
-
-    return ''
-  }
-
   $openMenu.click(() => {
     $menu.addClass('opened')
     toggleScrollVertical()
@@ -217,6 +205,9 @@ $(document).ready(() => {
     $('[data-aos]').addClass('no-aos-animation')
   }
 
+  const observer = lozad()
+  observer.observe()
+
   tippy('.js-tooltip')
 
   trySearchFeature()

src/js/helpers.js

@@ -0,0 +1,23 @@
+export const isRTL = () => {
+  const $html = document.querySelector('html')
+  return $html.getAttribute('lang') === 'ar' || $html.getAttribute('lang') === 'he'
+}
+
+export const isMobile = (width = '768px') => {
+  return window.matchMedia(`(max-width: ${width})`).matches
+}
+
+export const formatDate = (date) => {
+  if (date) {
+    return new Date(date).toLocaleDateString(
+      document.documentElement.lang,
+      {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric'
+      }
+    )
+  }
+
+  return ''
+}

src/js/home.js

@@ -1,8 +1,8 @@
 import $ from 'jquery'
 import slick from 'slick-carousel'
+import { isRTL } from './helpers'
 
 $(document).ready(() => {
-  const isRTL = $('html').attr('lang') === 'ar' || $('html').attr('lang') === 'he'
   const $featuredArticles = $('.js-featured-articles')
 
   if ($featuredArticles.length > 0) {
@@ -12,7 +12,7 @@ $(document).ready(() => {
       prevArrow: '<button class="m-icon-button in-featured-articles slick-prev" aria-label="Previous"><span class="icon-arrow-left"></span></button>',
       nextArrow: '<button class="m-icon-button in-featured-articles slick-next" aria-label="Next"><span class="icon-arrow-right"></span></button>',
       mobileFirst: true,
-      rtl: isRTL
+      rtl: isRTL()
     })
 
     setTimeout(() => {

src/js/post.js

@@ -3,6 +3,10 @@ import slick from 'slick-carousel'
 import stickybits from 'stickybits'
 import mediumZoom from 'medium-zoom'
 import fitvids from 'fitvids'
+import {
+  isRTL,
+  isMobile
+} from './helpers'
 
 let $aosWrapper = null
 let $progressCircle = null
@@ -12,10 +16,6 @@ let lastDocumentHeight = 0
 let circumference = 0
 let isTicking = false
 
-function isMobile(width = '768px') {
-  return window.matchMedia(`(max-width: ${width})`).matches
-}
-
 function onScrolling() {
   lastScrollingY = window.pageYOffset
   requestTicking()
@@ -102,8 +102,6 @@ function prepareProgressCircle() {
 }
 
 $(document).ready(() => {
-  const isRTL = $('html').attr('lang') === 'ar' || $('html').attr('lang') === 'he'
-
   $aosWrapper = $('.js-aos-wrapper')
   const $scrollButton = $('.js-scrolltop')
   const $loadComments = $('.js-load-comments')
@@ -153,7 +151,7 @@ $(document).ready(() => {
           }
         }
       ],
-      rtl: isRTL
+      rtl: isRTL()
     })
   }
 

src/package.json

@@ -37,6 +37,7 @@
     "fuse.js": "^3.4.2",
     "headroom.js": "^0.10.3",
     "jquery": "^3.3.1",
+    "lozad": "^1.14.0",
     "medium-zoom": "^1.0.3",
     "promise-polyfill": "8.1.0",
     "slick-carousel": "^1.8.1",

src/sass/common/_global.scss

@@ -59,6 +59,20 @@ fieldset {
   z-index: 5;
 }
 
+div[data-loaded="true"],
+img[data-loaded="true"] {
+  opacity: 0;
+  @include animation('fadeIn 0.5s forwards');
+  @include keyframes(fadeIn) {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+}
+
 ::-webkit-input-placeholder {
   color: $gray;
 }

src/webpack.mix.js

@@ -16,7 +16,7 @@ mix.webpackConfig({
   }
 });
 
-mix.js('js/polyfill.js', 'js/')
+mix.js('js/helpers.js', 'js/')
   .js('js/app.js', 'js/')
   .js('js/home.js', 'js/')
   .js('js/post.js', 'js/')