| 
 | 1 | +/*! lozad.js - v1.14.0 - 2019-10-19  | 
 | 2 | +* https://github.com/ApoorvSaxena/lozad.js  | 
 | 3 | +* Copyright (c) 2019 Apoorv Saxena; Licensed MIT */  | 
 | 4 | + | 
 | 5 | + | 
 | 6 | +(function (global, factory) {  | 
 | 7 | +  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :  | 
 | 8 | +  typeof define === 'function' && define.amd ? define(factory) :  | 
 | 9 | +  (global = global || self, global.lozad = factory());  | 
 | 10 | +}(this, function () { 'use strict';  | 
 | 11 | + | 
 | 12 | +  /**  | 
 | 13 | +   * Detect IE browser  | 
 | 14 | +   * @const {boolean}  | 
 | 15 | +   * @private  | 
 | 16 | +   */  | 
 | 17 | +  var isIE = typeof document !== 'undefined' && document.documentMode;  | 
 | 18 | + | 
 | 19 | +  var defaultConfig = {  | 
 | 20 | +    rootMargin: '0px',  | 
 | 21 | +    threshold: 0,  | 
 | 22 | +    load: function load(element) {  | 
 | 23 | +      if (element.nodeName.toLowerCase() === 'picture') {  | 
 | 24 | +        var img = document.createElement('img');  | 
 | 25 | +        if (isIE && element.getAttribute('data-iesrc')) {  | 
 | 26 | +          img.src = element.getAttribute('data-iesrc');  | 
 | 27 | +        }  | 
 | 28 | + | 
 | 29 | +        if (element.getAttribute('data-alt')) {  | 
 | 30 | +          img.alt = element.getAttribute('data-alt');  | 
 | 31 | +        }  | 
 | 32 | + | 
 | 33 | +        element.append(img);  | 
 | 34 | +      }  | 
 | 35 | + | 
 | 36 | +      if (element.nodeName.toLowerCase() === 'video' && !element.getAttribute('data-src')) {  | 
 | 37 | +        if (element.children) {  | 
 | 38 | +          var childs = element.children;  | 
 | 39 | +          var childSrc = void 0;  | 
 | 40 | +          for (var i = 0; i <= childs.length - 1; i++) {  | 
 | 41 | +            childSrc = childs[i].getAttribute('data-src');  | 
 | 42 | +            if (childSrc) {  | 
 | 43 | +              childs[i].src = childSrc;  | 
 | 44 | +            }  | 
 | 45 | +          }  | 
 | 46 | + | 
 | 47 | +          element.load();  | 
 | 48 | +        }  | 
 | 49 | +      }  | 
 | 50 | + | 
 | 51 | +      if (element.getAttribute('data-src')) {  | 
 | 52 | +        element.src = element.getAttribute('data-src');  | 
 | 53 | +      }  | 
 | 54 | + | 
 | 55 | +      if (element.getAttribute('data-srcset')) {  | 
 | 56 | +        element.setAttribute('srcset', element.getAttribute('data-srcset'));  | 
 | 57 | +      }  | 
 | 58 | + | 
 | 59 | +      if (element.getAttribute('data-background-image')) {  | 
 | 60 | +        element.style.backgroundImage = 'url(\'' + element.getAttribute('data-background-image').split(',').join('\'),url(\'') + '\')';  | 
 | 61 | +      } else if (element.getAttribute('data-background-image-set')) {  | 
 | 62 | +        var imageSetLinks = element.getAttribute('data-background-image-set').split(',');  | 
 | 63 | +        var firstUrlLink = imageSetLinks[0].substr(0, imageSetLinks[0].indexOf(' ')) || imageSetLinks[0]; // Substring before ... 1x  | 
 | 64 | +        firstUrlLink = firstUrlLink.indexOf('url(') === -1 ? 'url(' + firstUrlLink + ')' : firstUrlLink;  | 
 | 65 | +        if (imageSetLinks.length === 1) {  | 
 | 66 | +          element.style.backgroundImage = firstUrlLink;  | 
 | 67 | +        } else {  | 
 | 68 | +          element.setAttribute('style', (element.getAttribute('style') || '') + ('background-image: ' + firstUrlLink + '; background-image: -webkit-image-set(' + imageSetLinks + '); background-image: image-set(' + imageSetLinks + ')'));  | 
 | 69 | +        }  | 
 | 70 | +      }  | 
 | 71 | + | 
 | 72 | +      if (element.getAttribute('data-toggle-class')) {  | 
 | 73 | +        element.classList.toggle(element.getAttribute('data-toggle-class'));  | 
 | 74 | +      }  | 
 | 75 | +    },  | 
 | 76 | +    loaded: function loaded() {}  | 
 | 77 | +  };  | 
 | 78 | + | 
 | 79 | +  function markAsLoaded(element) {  | 
 | 80 | +    element.setAttribute('data-loaded', true);  | 
 | 81 | +  }  | 
 | 82 | + | 
 | 83 | +  var isLoaded = function isLoaded(element) {  | 
 | 84 | +    return element.getAttribute('data-loaded') === 'true';  | 
 | 85 | +  };  | 
 | 86 | + | 
 | 87 | +  var onIntersection = function onIntersection(load, loaded) {  | 
 | 88 | +    return function (entries, observer) {  | 
 | 89 | +      entries.forEach(function (entry) {  | 
 | 90 | +        if (entry.intersectionRatio > 0 || entry.isIntersecting) {  | 
 | 91 | +          observer.unobserve(entry.target);  | 
 | 92 | + | 
 | 93 | +          if (!isLoaded(entry.target)) {  | 
 | 94 | +            load(entry.target);  | 
 | 95 | +            markAsLoaded(entry.target);  | 
 | 96 | +            loaded(entry.target);  | 
 | 97 | +          }  | 
 | 98 | +        }  | 
 | 99 | +      });  | 
 | 100 | +    };  | 
 | 101 | +  };  | 
 | 102 | + | 
 | 103 | +  var getElements = function getElements(selector) {  | 
 | 104 | +    var root = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document;  | 
 | 105 | + | 
 | 106 | +    if (selector instanceof Element) {  | 
 | 107 | +      return [selector];  | 
 | 108 | +    }  | 
 | 109 | + | 
 | 110 | +    if (selector instanceof NodeList) {  | 
 | 111 | +      return selector;  | 
 | 112 | +    }  | 
 | 113 | + | 
 | 114 | +    return root.querySelectorAll(selector);  | 
 | 115 | +  };  | 
 | 116 | + | 
 | 117 | +  function lozad () {  | 
 | 118 | +    var selector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '.lozad';  | 
 | 119 | +    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};  | 
 | 120 | + | 
 | 121 | +    var _Object$assign = Object.assign({}, defaultConfig, options),  | 
 | 122 | +        root = _Object$assign.root,  | 
 | 123 | +        rootMargin = _Object$assign.rootMargin,  | 
 | 124 | +        threshold = _Object$assign.threshold,  | 
 | 125 | +        load = _Object$assign.load,  | 
 | 126 | +        loaded = _Object$assign.loaded;  | 
 | 127 | + | 
 | 128 | +    var observer = void 0;  | 
 | 129 | + | 
 | 130 | +    if (typeof window !== 'undefined' && window.IntersectionObserver) {  | 
 | 131 | +      observer = new IntersectionObserver(onIntersection(load, loaded), {  | 
 | 132 | +        root: root,  | 
 | 133 | +        rootMargin: rootMargin,  | 
 | 134 | +        threshold: threshold  | 
 | 135 | +      });  | 
 | 136 | +    }  | 
 | 137 | + | 
 | 138 | +    return {  | 
 | 139 | +      observe: function observe() {  | 
 | 140 | +        var elements = getElements(selector, root);  | 
 | 141 | + | 
 | 142 | +        for (var i = 0; i < elements.length; i++) {  | 
 | 143 | +          if (isLoaded(elements[i])) {  | 
 | 144 | +            continue;  | 
 | 145 | +          }  | 
 | 146 | + | 
 | 147 | +          if (observer) {  | 
 | 148 | +            observer.observe(elements[i]);  | 
 | 149 | +            continue;  | 
 | 150 | +          }  | 
 | 151 | + | 
 | 152 | +          load(elements[i]);  | 
 | 153 | +          markAsLoaded(elements[i]);  | 
 | 154 | +          loaded(elements[i]);  | 
 | 155 | +        }  | 
 | 156 | +      },  | 
 | 157 | +      triggerLoad: function triggerLoad(element) {  | 
 | 158 | +        if (isLoaded(element)) {  | 
 | 159 | +          return;  | 
 | 160 | +        }  | 
 | 161 | + | 
 | 162 | +        load(element);  | 
 | 163 | +        markAsLoaded(element);  | 
 | 164 | +        loaded(element);  | 
 | 165 | +      },  | 
 | 166 | + | 
 | 167 | +      observer: observer  | 
 | 168 | +    };  | 
 | 169 | +  }  | 
 | 170 | + | 
 | 171 | +  return lozad;  | 
 | 172 | + | 
 | 173 | +}));  | 
0 commit comments