Merge pull request WebStackPage#32 from hustjiangtao/master

Feat: img lazy loaded
haohao036 · Jan 7, 2020 · ada27cf · ada27cf
2 parents c695c79 + 2ddd1de
commit ada27cf
Show file tree

Hide file tree

Showing 3 changed files with 653 additions and 470 deletions.
diff --git a/assets/js/lozad.js b/assets/js/lozad.js
@@ -0,0 +1,173 @@
+/*! lozad.js - v1.14.0 - 2019-10-19
+* https://github.com/ApoorvSaxena/lozad.js
+* Copyright (c) 2019 Apoorv Saxena; Licensed MIT */
+
+
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof define === 'function' && define.amd ? define(factory) :
+  (global = global || self, global.lozad = factory());
+}(this, function () { 'use strict';
+
+  /**
+   * Detect IE browser
+   * @const {boolean}
+   * @private
+   */
+  var isIE = typeof document !== 'undefined' && document.documentMode;
+
+  var defaultConfig = {
+    rootMargin: '0px',
+    threshold: 0,
+    load: function load(element) {
+      if (element.nodeName.toLowerCase() === 'picture') {
+        var img = document.createElement('img');
+        if (isIE && element.getAttribute('data-iesrc')) {
+          img.src = element.getAttribute('data-iesrc');
+        }
+
+        if (element.getAttribute('data-alt')) {
+          img.alt = element.getAttribute('data-alt');
+        }
+
+        element.append(img);
+      }
+
+      if (element.nodeName.toLowerCase() === 'video' && !element.getAttribute('data-src')) {
+        if (element.children) {
+          var childs = element.children;
+          var childSrc = void 0;
+          for (var i = 0; i <= childs.length - 1; i++) {
+            childSrc = childs[i].getAttribute('data-src');
+            if (childSrc) {
+              childs[i].src = childSrc;
+            }
+          }
+
+          element.load();
+        }
+      }
+
+      if (element.getAttribute('data-src')) {
+        element.src = element.getAttribute('data-src');
+      }
+
+      if (element.getAttribute('data-srcset')) {
+        element.setAttribute('srcset', element.getAttribute('data-srcset'));
+      }
+
+      if (element.getAttribute('data-background-image')) {
+        element.style.backgroundImage = 'url(\'' + element.getAttribute('data-background-image').split(',').join('\'),url(\'') + '\')';
+      } else if (element.getAttribute('data-background-image-set')) {
+        var imageSetLinks = element.getAttribute('data-background-image-set').split(',');
+        var firstUrlLink = imageSetLinks[0].substr(0, imageSetLinks[0].indexOf(' ')) || imageSetLinks[0]; // Substring before ... 1x
+        firstUrlLink = firstUrlLink.indexOf('url(') === -1 ? 'url(' + firstUrlLink + ')' : firstUrlLink;
+        if (imageSetLinks.length === 1) {
+          element.style.backgroundImage = firstUrlLink;
+        } else {
+          element.setAttribute('style', (element.getAttribute('style') || '') + ('background-image: ' + firstUrlLink + '; background-image: -webkit-image-set(' + imageSetLinks + '); background-image: image-set(' + imageSetLinks + ')'));
+        }
+      }
+
+      if (element.getAttribute('data-toggle-class')) {
+        element.classList.toggle(element.getAttribute('data-toggle-class'));
+      }
+    },
+    loaded: function loaded() {}
+  };
+
+  function markAsLoaded(element) {
+    element.setAttribute('data-loaded', true);
+  }
+
+  var isLoaded = function isLoaded(element) {
+    return element.getAttribute('data-loaded') === 'true';
+  };
+
+  var onIntersection = function onIntersection(load, loaded) {
+    return function (entries, observer) {
+      entries.forEach(function (entry) {
+        if (entry.intersectionRatio > 0 || entry.isIntersecting) {
+          observer.unobserve(entry.target);
+
+          if (!isLoaded(entry.target)) {
+            load(entry.target);
+            markAsLoaded(entry.target);
+            loaded(entry.target);
+          }
+        }
+      });
+    };
+  };
+
+  var getElements = function getElements(selector) {
+    var root = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document;
+
+    if (selector instanceof Element) {
+      return [selector];
+    }
+
+    if (selector instanceof NodeList) {
+      return selector;
+    }
+
+    return root.querySelectorAll(selector);
+  };
+
+  function lozad () {
+    var selector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '.lozad';
+    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+    var _Object$assign = Object.assign({}, defaultConfig, options),
+        root = _Object$assign.root,
+        rootMargin = _Object$assign.rootMargin,
+        threshold = _Object$assign.threshold,
+        load = _Object$assign.load,
+        loaded = _Object$assign.loaded;
+
+    var observer = void 0;
+
+    if (typeof window !== 'undefined' && window.IntersectionObserver) {
+      observer = new IntersectionObserver(onIntersection(load, loaded), {
+        root: root,
+        rootMargin: rootMargin,
+        threshold: threshold
+      });
+    }
+
+    return {
+      observe: function observe() {
+        var elements = getElements(selector, root);
+
+        for (var i = 0; i < elements.length; i++) {
+          if (isLoaded(elements[i])) {
+            continue;
+          }
+
+          if (observer) {
+            observer.observe(elements[i]);
+            continue;
+          }
+
+          load(elements[i]);
+          markAsLoaded(elements[i]);
+          loaded(elements[i]);
+        }
+      },
+      triggerLoad: function triggerLoad(element) {
+        if (isLoaded(element)) {
+          return;
+        }
+
+        load(element);
+        markAsLoaded(element);
+        loaded(element);
+      },
+
+      observer: observer
+    };
+  }
+
+  return lozad;
+
+}));