feat: Lazy load member list images

Closes #30
HGNM · Feb 25, 2019 · 43cfc6a · 43cfc6a
1 parent 62e89fe
commit 43cfc6a
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 3 deletions.
diff --git a/components/member_list.php b/components/member_list.php
@@ -13,7 +13,7 @@ function member_list(array $opts)
 
         $html = '<section class="' . $classes . '">' .
                   '<h2>' . $heading . '</h2>' .
-                  '<ul class="clearfix">';
+                  '<ul>';
 
         foreach ($members as $post) {
             $html .= component('member_list_item', array(

diff --git a/components/member_list_item.php b/components/member_list_item.php
@@ -24,7 +24,7 @@ function member_list_item($opts)
             if (!$alt_text) {
                 $alt_text = $member_name;
             }
-            $html .= '<img src="' . $imgsrc[0] . '" alt="' . $alt_text . '">';
+            $html .= '<img data-src="' . $imgsrc[0] . '" alt="' . $alt_text . '" class="lozad">';
         }
         $html .= "<span>$member_name</span></a></li>";
         return $html;

diff --git a/scss/_vars.scss b/scss/_vars.scss
@@ -65,10 +65,11 @@ $queries: (
 
 // Composer List Grid Mixin
 @mixin composers-grid($cols, $gutter: .75em) {
-  float: left;
+  display: inline-block;
   margin-right: $gutter;
   margin-bottom: $gutter - .375em;
   width: calc((100% - #{($cols - 1) * $gutter}) / #{$cols});
+  vertical-align: top;
 
   &:nth-child(#{$cols}n) {
     margin-right: 0;

diff --git a/scss/style.scss b/scss/style.scss
@@ -761,8 +761,10 @@ iframe {
       img {
         float: left;
         transition: filter .4s ease-out;
+        background: $black;
         width: 35%;
         max-width: 5em;
+        height: 100%;
         filter: grayscale(1) contrast(125%) brightness(125%) saturate(100%);
 
         @include mq (m) {