https://javlibrary.pro/js/lazyload.js

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

135            this.images.forEach(function (image) {
136                let src = image.getAttribute(self.settings.src);
137                let srcset = image.getAttribute(self.settings.srcset);
138                if ("img" === image.tagName.toLowerCase()) {
139                    if (src) {
140                        image.src = src;
141                    }
142                    if (srcset) {
143                        image.srcset = srcset;
144                    }
145                } else {
146                    image.style.backgroundImage = "url('" + src + "')";
147                }
148            });
149        },
150
151        destroy: function () {
152            if (!this.settings) { return; }
153            this.observer.disconnect();
154            this.settings = null;
155        }
156    };
157
158    root.lazyload = function(images, options) {
159        return new LazyLoad(images, options);
160    };
161
162    if (root.jQuery) {
163        const $ = root.jQuery;
164        $.fn.lazyload = function (options) {
165            options = options || {};
166            options.attribute = options.attribute || "data-src";
167            new LazyLoad($.makeArray(this), options);
168            return this;
169        };
170    }
171
172    return LazyLoad;
173});