https://pharmamex.com.mx/includes/javascript/lazyload.js

1/*! Lazy Load - JavaScript plugin for lazy loading images 2017 Mika Tuupola https://appelsiini.net/projects/lazyload  Version: 2.0.0-beta.2 */
2
3(function (root, factory) {
4    if (typeof exports === "object") {
5        module.exports = factory(root);
6    } else if (typeof define === "function" && define.amd) {
7        define([], factory(root));
8    } else {
9        root.LazyLoad = factory(root);
10    }
11}) (typeof global !== "undefined" ? global : this.window || this.global, function (root) {
12
13    "use strict";
14
15    const defaults = {
16        src: "data-src",
17        srcset: "data-srcset",
18        selector: ".lazyload"
19    };
20
21    /**
22    * Merge two or more objects. Returns a new object.
23    * @private
24    * @param {Boolean}  deep     If true, do a deep (or recursive) merge [optional]
25    * @param {Object}   objects  The objects to merge together
26    * @returns {Object}          Merged values of defaults and options
27    */
28    const extend = function ()  {
29
30        let extended = {};
31        let deep = false;
32        let i = 0;
33        let length = arguments.length;
34
35        /* Check if a deep merge */
36        if (Object.prototype.toString.call(arguments[0]) === "[object Boolean]") {
37            deep = arguments[0];
38            i++;
39        }
40
41        /* Merge the object into the extended object */
42        let merge = function (obj) {
43            for (let prop in obj) {
44                if (Object.prototype.hasOwnProperty.call(obj, prop)) {
45                    /* If deep merge and property is an object, merge properties */
46                    if (deep && Object.prototype.toString.call(obj[prop]) === "[object Object]") {
47                        extended[prop] = extend(true, extended[prop], obj[prop]);
48                    } else {
49                        extended[prop] = obj[prop];
50                    }
51                }
52            }
53        };
54
55        /* Loop through each object and conduct a merge */
56        for (; i < length; i++) {
57            let obj = arguments[i];
58            merge(obj);
59        }
60
61        return extended;
62    };
63
64    function LazyLoad(images, options) {
65        this.settings = extend(defaults, options || {});
66        this.images = images || document.querySelectorAll(this.settings.selector);
67        this.observer = null;
68        this.init();
69    }
70
71    LazyLoad.prototype = {
72        init: function() {
73
74            /* Without observers load everything and bail out early. */
75            if (!root.IntersectionObserver) {
76                this.loadImages();
77                return;
78            }
79
80            let self = this;
81            let observerConfig = {
82                root: null,
83                rootMargin: "0px",
84                threshold: [0]
85            };
86
87            this.observer = new IntersectionObserver(function(entries) {
88                entries.forEach(function (entry) {
89                    if (entry.intersectionRatio > 0) {
90                        self.observer.unobserve(entry.target);
91                        let src = entry.target.getAttribute(self.settings.src);
92                        let srcset = entry.target.getAttribute(self.settings.srcset);
93                        if ("img" === entry.target.tagName.toLowerCase()) {
94                            if (src) {
95                                entry.target.src = src;
96                            }
97                            if (srcset) {
98                                entry.target.srcset = srcset;
99                            }
100                            entry.target.classList.add('anim');
101
102                        } else {
103                            entry.target.style.backgroundImage = "url(" + src + ")";
104                        }
105                    }
106                });
107            }, observerConfig);
108
109            this.images.forEach(function (image) {
110                self.observer.observe(image);
111            });
112        },
113
114        loadAndDestroy: function () {
115            if (!this.settings) { return; }
116            this.loadImages();
117            this.destroy();
118        },
119
120        loadImages: function () {
121            if (!this.settings) { return; }
122
123            let self = this;

124            this.images.forEach(function (image) {
125                let src = image.getAttribute(self.settings.src);
126                let srcset = image.getAttribute(self.settings.srcset);
127                if ("img" === image.tagName.toLowerCase()) {
128                    if (src) {
129                        image.src = src;
130                    }
131                    if (srcset) {
132                        image.srcset = srcset;
133                    }
134                } else {
135                    image.style.backgroundImage = "url('" + src + "')";
136                }
137            });
138        },
139
140        destroy: function () {
141            if (!this.settings) { return; }
142            this.observer.disconnect();
143            this.settings = null;
144        }
145    };
146
147    root.lazyload = function(images, options) {
148        return new LazyLoad(images, options);
149    };
150
151    if (root.jQuery) {
152        const $ = root.jQuery;
153        $.fn.lazyload = function (options) {
154            options = options || {};
155            options.attribute = options.attribute || "data-src";
156            new LazyLoad($.makeArray(this), options);
157            return this;
158        };
159    }
160
161    return LazyLoad;
162});