IMPROVEMENT: load data-lazy-bg

src/js/_main.js

@@ -1,4 +1,4 @@
-"use strict";
+'use strict';
 
 import $ from 'jquery';
 
@@ -15,8 +15,7 @@ import FormBasics from './_components/_ui.form.basics';
 import SmoothScroll from 'smooth-scroll';
 const smoothScroll = SmoothScroll();
 
-
-const MainUI = (($) => {
+const MainUI = ($ => {
   // Constants
   const W = window;
   const D = document;
@@ -48,7 +47,6 @@ const MainUI = (($) => {
     }
   });
 
-
   // update online/offline state
   const updateOnlineStatus = () => {
     if (!navigator.onLine) {
@@ -63,13 +61,21 @@ const MainUI = (($) => {
   };
 
   if (typeof navigator.onLine !== 'undefined') {
-    W.addEventListener('offline', () => {
+    W.addEventListener(
+      'offline',
+      () => {
         updateOnlineStatus();
-    }, false);
+      },
+      false,
+    );
 
-    W.addEventListener('online', () => {
+    W.addEventListener(
+      'online',
+      () => {
         updateOnlineStatus();
-    }, false);
+      },
+      false,
+    );
 
     W.addEventListener('load', () => {
       updateOnlineStatus();
@@ -78,17 +84,14 @@ const MainUI = (($) => {
 
   // scrollTo
   const ScrollTo = (trigger, selector) => {
-    smoothScroll.animateScroll(
-      D.querySelector(selector),
-      trigger, {
+    smoothScroll.animateScroll(D.querySelector(selector), trigger, {
       speed: 500,
       offset: -20,
       //easing: 'easeInOutCubic',
       // Callback API
       //before: (anchor, toggle) => {}, // Callback to run before scroll
       //`after: (anchor, toggle) => {} // Callback to run after scroll
-      }
-    );
+    });
   };
 
   // session ping
@@ -118,9 +121,9 @@ const MainUI = (($) => {
   }, 300000); // 5 min in ms
 
   W.URLDetails = {
-    'base': $('base').attr('href'),
-    'relative': '/',
-    'hash': '',
+    base: $('base').attr('href'),
+    relative: '/',
+    hash: '',
   };
 
   class MainUI {
@@ -171,7 +174,7 @@ const MainUI = (($) => {
       //
 
       // scroll links
-      $('.js-scrollTo').on('click', (e) => {
+      $('.js-scrollTo').on('click', e => {
         e.preventDefault();
         const el = e.currentTarget;
         const $el = $(e.currentTarget);
@@ -181,7 +184,9 @@ const MainUI = (($) => {
 
       // load external fonts
       if ($('[data-extfont]').length) {
-        $.getScript('//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js', () => {
+        $.getScript(
+          '//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js',
+          () => {
             const fonts = [];
 
             $('[data-extfont]').each((i, el) => {
@@ -193,11 +198,12 @@ const MainUI = (($) => {
                 families: fonts,
               },
             });
-        });
+          },
+        );
       }
 
       // data-set links
-      $('[data-set-target]').on('click', (e) => {
+      $('[data-set-target]').on('click', e => {
         const $el = $(e.currentTarget);
         const $target = $($el.data('set-target'));
 
@@ -261,14 +267,17 @@ const MainUI = (($) => {
       const hash = location.indexOf('#');
 
       W.URLDetails.relative = location.split('#')[0];
-      W.URLDetails.hash = (hash >= 0) ? location.substr(location.indexOf('#')) : '';
+      W.URLDetails.hash =
+        hash >= 0 ? location.substr(location.indexOf('#')) : '';
     }
 
     // show site-wide alert
     static alert(msg, cls) {
       $SiteWideMessage.fadeOut('fast');
 
-      $SiteWideMessage.html(`<div class="page-alert"><div class="alert alert-${cls}"><i class="close" data-dismiss="alert">&times;</i>${msg}</div></div>`);
+      $SiteWideMessage.html(
+        `<div class="page-alert"><div class="alert alert-${cls}"><i class="close" data-dismiss="alert">&times;</i>${msg}</div></div>`,
+      );
       $SiteWideMessage.find('.page-alert').alert();
 
       $SiteWideMessage.find('.close[data-dismiss="alert"]').click(() => {
@@ -294,10 +303,7 @@ const MainUI = (($) => {
         });
       }
 
-      if (
-        $AlertNotify.length &&
-        typeof $AlertNotify[0].stop !== 'undefined'
-      ) {
+      if ($AlertNotify.length && typeof $AlertNotify[0].stop !== 'undefined') {
         $AlertNotify[0].stop();
       }
 
@@ -334,6 +340,26 @@ const MainUI = (($) => {
         }
       });
 
+      // load lazy backgrounds
+      $Body.find('[data-lazy-bg]').each((i, el) => {
+        const $el = $(el);
+        const lazySrc = $el.data('lazy-bg');
+
+        if (lazySrc && lazySrc.length) {
+          $imgLazyUrls.push(lazySrc);
+          $el.addClass('loading');
+
+          AjaxUI.preload([lazySrc]).then(() => {
+            $el.css({ 'background-image': lazySrc });
+
+            $el.addClass('loaded');
+            $el.removeClass('loading');
+
+            $el.trigger('image-lazy-bg-loaded');
+          });
+        }
+      });
+
       // load defined images
       AjaxUI.preload($imgUrls).then(() => {
         $(W).trigger('images-loaded');

src/scss/_components/_ui.main.scss

@@ -117,7 +117,7 @@ textarea,
 
 .field {
     position: relative;
-    margin: ($grid-gutter-height / 4) 0;
+    margin: ($grid-gutter-height / 2) 0;
 
     &.composite {
         margin-top: 0;