https://myrightfood.com/wp-content/themes/xstore/js/libs/jquery.lazyload.js

1/*!
2 * Lazy Load - JavaScript plugin for lazy loading images
3 *
4 * Copyright (c) 2007-2019 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-rc.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);
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    if (typeof define === "function" && define.amd){
29        root = window;
30    }
31
32    const defaults = {
33        src: "data-src",
34        srcset: "data-srcset",
35        selector: ".lazyload:not(.zoomImg, .et-lazy-loaded, .rs-lazyload)",
36        root: null,
37        rootMargin: "200px",
38        threshold: 0
39    };
40
41    /**
42     * Merge two or more objects. Returns a new object.
43     * @private
44     * @param {Boolean}  deep     If true, do a deep (or recursive) merge [optional]
45     * @param {Object}   objects  The objects to merge together
46     * @returns {Object}          Merged values of defaults and options
47     */
48    const extend = function ()  {
49
50        let extended = {};
51        let deep = true;
52        let i = 0;
53        let length = arguments.length;
54
55        /* Check if a deep merge */
56        if (Object.prototype.toString.call(arguments[0]) === "[object Boolean]") {
57            deep = arguments[0];
58            i++;
59        }
60
61        /* Merge the object into the extended object */
62        let merge = function (obj) {
63            for (let prop in obj) {
64                if (Object.prototype.hasOwnProperty.call(obj, prop)) {
65                    /* If deep merge and property is an object, merge properties */
66                    if (deep && Object.prototype.toString.call(obj[prop]) === "[object Object]") {
67                        extended[prop] = extend(true, extended[prop], obj[prop]);
68                    } else {
69                        extended[prop] = obj[prop];
70                    }
71                }
72            }
73        };
74
75        /* Loop through each object and conduct a merge */
76        for (; i < length; i++) {
77            let obj = arguments[i];
78            merge(obj);
79        }
80
81        return extended;
82    };
83
84    function LazyLoad(images, options) {
85        this.settings = extend(defaults, options || {});
86        this.images = images || document.querySelectorAll(this.settings.selector);
87        this.observer = null;
88        this.init();
89    }
90
91    LazyLoad.prototype = {
92        init: function() {
93
94            /* Without observers load everything and bail out early. */
95            if (!root.IntersectionObserver) {
96                this.loadImages();
97                return;
98            }
99
100            let self = this;
101            let observerConfig = {
102                root: this.settings.root,
103                rootMargin: this.settings.rootMargin,
104                threshold: [this.settings.threshold]
105            };
106
107            this.observer = new IntersectionObserver(function(entries) {
108                Array.prototype.forEach.call(entries, function (entry) {
109                    // if (entry.isIntersecting || entry.target.classList.contains('et-lazy-force-load')) {
110                    if (entry.isIntersecting) {
111                        // if ( entry.target.classList.contains('et-lazy-force-load') ) {
112                            if ( entry.target.closest('.swiper-wrapper') !== null ) {
113                                Array.prototype.forEach.call(entry.target.closest('.swiper-wrapper').querySelectorAll(self.settings.selector), function (new_image) {
114                                    let src = new_image.getAttribute(self.settings.src);
115                                    let srcset = new_image.getAttribute(self.settings.srcset);
116                                    if ("img" === new_image.tagName.toLowerCase()) {
117                                        if (new_image.classList.contains('et-lazy-loaded')) {
118                                            self.observer.unobserve(new_image);
119                                        }
120                                        if (src) {
121                                            new_image.src = src;
122                                            if (typeof etTheme !== 'undefined' && typeof etTheme.isotope && etTheme.isotope !== undefined)
123                                                etTheme.isotope();
124                                        }
125                                        if (srcset) {
126                                            new_image.srcset = srcset;
127                                            if (typeof etTheme !== 'undefined' && typeof etTheme.isotope && etTheme.isotope !== undefined)
128                                                etTheme.isotope();
129                                        }
130                                        new_image.classList.remove('et-lazyload-fadeIn');
131                                        new_image.classList.remove('et-lazyload-force-load');
132                                        new_image.classList.add('et-lazy-loaded');
133                                    } else {
134                                        new_image.style.backgroundImage = "url(" + src + ")";
135                                        self.observer.unobserve(new_image);
136                                    }
137                                    // jQuery(new_image).addClass('sdfd');
138                                    // let swiper = jQuery(new_image).parents('.swiper-container').data('swiper');
139                                    // console.log(swiper);
140                                    // swiper.init();
141                                });
142                                // @todo update swiper for this images
143                                // window.dispatchEvent(new Event('resize'));
144                            }
145                        // }
146                        let src = entry.target.getAttribute(self.settings.src);
147                        let srcset = entry.target.getAttribute(self.settings.srcset);
148                        if ("img" === entry.target.tagName.toLowerCase()) {
149                            if ( entry.target.classList.contains('et-lazy-loaded') ) {
150                                self.observer.unobserve(entry.target);
151                            }
152                            if (src) {
153                                entry.target.src = src;
154                                if ( typeof etTheme !== 'undefined' && typeof etTheme.isotope !== 'undefined' && etTheme.isotope !== undefined )
155                                    etTheme.isotope();
156                            }
157                            if (srcset) {
158                                entry.target.srcset = srcset;
159                                if ( typeof etTheme !== 'undefined' && typeof etTheme.isotope && etTheme.isotope !== undefined )
160                                    etTheme.isotope();
161                            }
162                            entry.target.classList.remove('et-lazyload-fadeIn');
163                            entry.target.classList.remove('et-lazyload-force-load');
164                            entry.target.classList.add('et-lazy-loaded');
165                        } else {
166                            entry.target.style.backgroundImage = "url(" + src + ")";
167                            self.observer.unobserve(entry.target);
168                        }
169                    }
170                });
171            }, observerConfig);
172
173            Array.prototype.forEach.call(this.images, function (image) {
174                // console.log(image);
175                // console.log(image.parentElement);
176                self.observer.observe(image);
177                // this.settings.selector
178                // if ( image.closest('.swiper-wrapper') !== null )
179                //     Array.prototype.forEach.call(image.closest('.swiper-wrapper').querySelectorAll(self.settings.selector), function (new_image) {
180                //         new_image.classList.add('et-lazy-force-load');
181                //         // self.observer.observe(new_image);
182                //     });
183            });
184        },
185
186        loadAndDestroy: function () {
187            if (!this.settings) { return; }
188            this.loadImages();
189            this.destroy();
190        },
191
192        loadImages: function () {
193            if (!this.settings) { return; }
194
195            let self = this;
196            Array.prototype.forEach.call(this.images, function (image) {
197                let src = image.getAttribute(self.settings.src);
198                let srcset = image.getAttribute(self.settings.srcset);
199                if ("img" === image.tagName.toLowerCase()) {
200                    if (src) {
201                        image.src = src;
202                        if ( typeof etTheme !== 'undefined' && typeof etTheme.isotope && etTheme.isotope !== undefined )
203                            etTheme.isotope();
204                    }
205                    if (srcset) {
206                        image.srcset = srcset;
207                        if ( typeof etTheme !== 'undefined' && typeof etTheme.isotope && etTheme.isotope !== undefined )
208                            etTheme.isotope();
209                    }
210                    image.classList.remove('et-lazyload-fadeIn');
211                    image.classList.add('et-lazy-loaded');

212
213                } else {
214                    image.style.backgroundImage = "url('" + src + "')";
215                }
216            });
217        },
218
219        destroy: function () {
220            if (!this.settings) { return; }
221            this.observer.disconnect();
222            this.settings = null;
223        }
224    };
225
226    root.lazyload = function(images, options) {
227        return new LazyLoad(images, options);
228    };
229
230    if (root.jQuery) {
231        const $ = root.jQuery;
232        $.fn.lazyload = function (options) {
233            options = options || {};
234            options.attribute = options.attribute || "data-src";
235            new LazyLoad($.makeArray(this), options);
236            return this;
237        };
238    }
239
240    return LazyLoad;
241});