Load smaller pictures to make blogs faster

eddiesigner · Oct 29, 2019 · 1995c51 · 1995c51
1 parent 6a93856
commit 1995c51
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 10 deletions.
diff --git a/index.hbs b/index.hbs
@@ -40,13 +40,13 @@ into the {body} of the default.hbs template --}}
                     {{/if}}
                     <div class="m-featured-article__picture">
                       {{#if feature_image}}
-                      <div class="lozad" data-background-image="{{feature_image}}"></div>
+                      <div class="lozad" data-background-image="{{img_url feature_image size="l"}}"></div>
                       {{/if}}
                     </div>
                     <div class="m-featured-article__meta">
                       <a href="{{primary_author.url}}" class="m-featured-article__author js-tooltip" aria-label="Authors" data-tippy-content="{{t "Posted by"}} {{primary_author.name}} {{authors autolink="false" from="2" prefix=(t "Among with") separator=" , "}}">
                         {{#if primary_author.profile_image}}
-                        <div style="background-image: url({{primary_author.profile_image}});"></div>
+                        <div style="background-image: url({{img_url primary_author.profile_image size="xs"}});"></div>
                         {{else}}
                         <div style="background-image: url({{asset "images/default-avatar-square-small.jpg"}});"></div>
                         {{/if}}

diff --git a/package.json b/package.json
@@ -54,5 +54,5 @@
     "desktop": "assets/screenshot-desktop.jpg",
     "mobile": "assets/screenshot-mobile.jpg"
   },
-  "version": "0.5.6"
+  "version": "0.5.7"
 }
diff --git a/page-authors.hbs b/page-authors.hbs
@@ -28,7 +28,7 @@ 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 lozad" data-background-image="{{profile_image}}">
+              <div class="m-article-card__picture lozad" data-background-image="{{img_url profile_image size="m"}}">
                 {{else}}
                 <div class="m-article-card__picture lozad" data-background-image="{{asset "images/default-avatar-rectangle.jpg"}}">
                   {{/if}}

diff --git a/partials/header.hbs b/partials/header.hbs
@@ -65,7 +65,7 @@ This header template is shared across all the pages.
                           <a href="{{url}}" class="m-recent-article">
                             <div class="m-recent-article__picture">
                               {{#if feature_image}}
-                              <div class="lozad" data-background-image="{{img_url feature_image size="m"}}"></div>
+                              <div class="lozad" data-background-image="{{img_url feature_image size="s"}}"></div>
                               {{else}}
                               <div class="no-image lozad" data-background-image="{{asset "images/no-image.png"}}"></div>
                               {{/if}}

diff --git a/partials/loop.hbs b/partials/loop.hbs
@@ -6,15 +6,15 @@
   {{/is}}
   {{#if feature_image}}
     <article class="m-article-card {{post_class}}">
-      <div class="m-article-card__picture lozad" data-background-image="{{feature_image}}">
+      <div class="m-article-card__picture lozad" data-background-image="{{img_url feature_image size="m"}}">
   {{else}}
     <article class="m-article-card no-picture {{post_class}}">
       <div class="m-article-card__picture">
   {{/if}}
       <a href="{{url}}" class="m-article-card__picture-link" aria-label="Article"></a>
       <a href="{{primary_author.url}}" class="m-article-card__author js-tooltip" aria-label="Authors" data-tippy-content="{{t "Posted by"}} {{primary_author.name}} {{authors autolink="false" from="2" prefix=(t "Among with") separator=" , "}}">
         {{#if primary_author.profile_image}}
-          <div style="background-image: url({{primary_author.profile_image}});"></div>
+          <div style="background-image: url({{img_url primary_author.profile_image size="xs"}});"></div>
         {{else}}
           <div style="background-image: url({{asset "images/default-avatar-square-small.jpg"}});"></div>
         {{/if}}

diff --git a/src/js/app.js b/src/js/app.js
@@ -205,7 +205,11 @@ $(document).ready(() => {
     $('[data-aos]').addClass('no-aos-animation')
   }
 
-  const observer = lozad()
+  const observer = lozad('.lozad', {
+    loaded: (el) => {
+      el.classList.add('loaded')
+    }
+  })
   observer.observe()
 
   tippy('.js-tooltip')

diff --git a/src/sass/common/_global.scss b/src/sass/common/_global.scss
@@ -59,8 +59,8 @@ fieldset {
   z-index: 5;
 }
 
-div[data-loaded="true"],
-img[data-loaded="true"] {
+div.lozad.loaded,
+img.lozad.loaded {
   opacity: 0;
   @include animation('fadeIn 0.5s forwards');
   @include keyframes(fadeIn) {