Produced by Araxis Merge on 2023-03-13 03:01:17 +0000. See www.araxis.com for information about Merge. This report uses XHTML and CSS2, and is best viewed with a modern standards-compliant browser. For optimum results when printing this report, use landscape orientation and enable printing of background images and colours in your browser.
| # | Location | File | Last Modified |
|---|---|---|---|
| 1 | Porto v4.0.4/Porto Theme/app/design/frontend/Smartwave/porto/web/js | jquery.lazyload.js | 2018-06-12 05:23:24 +0000 |
| 2 | Porto v4.0.5/Porto Theme/app/design/frontend/Smartwave/porto/web/js | jquery.lazyload.js | 2023-03-09 09:05:24 +0000 |
| Description | Between Files 1 and 2 | |
|---|---|---|
| Text Blocks | Lines | |
| Unchanged | 44 | 110 |
| Changed | 31 | 301 |
| Inserted | 5 | 9 |
| Removed | 8 | 25 |
| Whitespace | Consecutive whitespace is treated as a single space |
|---|---|
| Character case | Differences in character case are significant |
| Line endings | Differences in line endings (CR and LF characters) are ignored |
| CR/LF characters | Not shown in the comparison detail |
| Active line-pairing rules |
No regular expressions were active.
| 1 | /*! | 1 | /*! | |||
| 2 | * Lazy Load - jQuery plugin for lazy loading images | 2 | * Lazy Load - JavaScript plugin for lazy loading images | |||
| 3 | * | 3 | * | |||
| 4 | * Copyright (c) 2007-2015 Mika Tuupola | 4 | * Copyright (c) 2007-2019 Mika Tuupola | |||
| 5 | * | 5 | * | |||
| 6 | * Licensed under the MIT license: | 6 | * Licensed under the MIT license: | |||
| 7 | * http://www.opensource.org/licenses/mit-license.php | 7 | * http://www.opensource.org/licenses/mit-license.php | |||
| 8 | * | 8 | * | |||
| 9 | * Project home: | 9 | * Project home: | |||
| 10 | * http://www.appelsiini.net/projects/lazyload | 10 | * https:// | |||
| 11 | * | 11 | * | |||
| 12 | * Version: 1.9.7 | 12 | * Version: 2.0.0-rc.2 | |||
| 13 | * | 13 | * | |||
| 14 | */ | 14 | */ | |||
| 15 | (function (factory) { | |||||
| 16 | 'use strict'; | |||||
| 17 | 15 | |||||
| 18 | if (typeof define === 'function' && define.amd) { | 16 | (function (root, factory) { | |||
| 19 | define([ | 17 | if (typeof exports === "object") { | |||
| 20 | 'jquery' | 18 | module.exports = factory(root); | |||
| 21 | | 19 | } else if (typeof define === "function" && define.amd) { | |||
| 20 | define([], factory); | |||||
| 22 | } else { | 21 | } else { | |||
| 23 | factory(window.jQuery); | 22 | root.LazyLoad = factory(root); | |||
| 24 | } | 23 | } | |||
| 25 | }(function ($) { | 24 | }) (typeof global !== "undefined" ? global : this.window || this.global, function (root) { | |||
| 26 | 'use strict'; | |||||
| 27 | 25 | |||||
| 28 | var $window = $(window); | 26 | "use strict"; | |||
| 29 | 27 | |||||
| 30 | $.fn.lazyload = function(options) { | 28 | if (typeof define === "function" && define.amd){ | |||
| 31 | var elements = this; | 29 | root = window; | |||
| 32 | var $container; | 30 | } | |||
| 33 | var settings = { | 31 | ||||
| 34 | threshold : 0, | 32 | const defaults = { | |||
| 35 | failure_limit : 0, | 33 | src: "data-src", | |||
| 36 | event : "scroll", | 34 | srcset: "data-srcset", | |||
| 37 | effect : "show", | 35 | selector: ".lazyload", | |||
| 38 | container : window, | 36 | root: null, | |||
| 39 | data_attribute : "src", | 37 | rootMargin: "0px", | |||
| 40 | data_srcset : " | 38 | threshold: 0 | |||
| 41 | skip_invisible : false, | |||||
| 42 | appear : null, | |||||
| 43 | load : null, | |||||
| 44 | placeholder : "data:image/gif;base64,R0lGODlhAQABAIAAAPT09P///yH5BAEAAAEALAAAAAABAAEAAAICRAEAOw==" | |||||
| 45 | }; | 39 | }; | |||
| 46 | 40 | |||||
| 47 | function update() { | 41 | /** | |||
| 48 | var counter = 0; | 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 | 49 | |||||
| 50 | elements.each(function() { | 50 | let extended = {}; | |||
| 51 | var $this = $(this); | 51 | let deep = false; | |||
| 52 | if (settings.skip_invisible && !$this.is(":visible")) { | 52 | let i = 0; | |||
| 53 | return; | 53 | let length = arguments.length; | |||
| 54 | } | |||||
| 55 | if ($.abovethetop(this, settings) || | |||||
| 56 | $.leftofbegin(this, settings)) { | |||||
| 57 | /* Nothing. */ | |||||
| 58 | } else if (!$.belowthefold(this, settings) && | |||||
| 59 | !$.rightoffold(this, settings)) { | |||||
| 60 | $this.trigger("appear"); | |||||
| 61 | /* if we found an image we'll load, reset the counter */ | |||||
| 62 | counter = 0; | |||||
| 63 | } else { | |||||
| 64 | if (++counter > settings.failure_limit) { | |||||
| 65 | return false; | |||||
| 66 | } | |||||
| 67 | } | |||||
| 68 | }); | |||||
| 69 | 54 | |||||
| 55 | /* Check if a deep merge */ | |||||
| 56 | if (Object.prototype.toString.call(arguments[0]) === "[object Boolean]") { | |||||
| 57 | deep = arguments[0]; | |||||
| 58 | i++; | |||||
| 70 | } | 59 | } | |||
| 71 | 60 | |||||
| 72 | if(options) { | 61 | /* Merge the object into the extended object */ | |||
| 73 | /* Maintain BC for a couple of versions. */ | 62 | let merge = function (obj) { | |||
| 74 | if (undefined !== options.failurelimit) { | 63 | for (let prop in obj) { | |||
| 75 | options.failure_limit = options.failurelimit; | 64 | if (Object.prototype.hasOwnProperty.call(obj, prop)) { | |||
| 76 | delete options.failurelimit; | 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]; | |||||
| 77 | } | 70 | } | |||
| 78 | if (undefined !== options.effectspeed) { | |||||
| 79 | options.effect_speed = options.effectspeed; | |||||
| 80 | delete options.effectspeed; | |||||
| 81 | } | 71 | } | |||
| 82 | ||||||
| 83 | $.extend(settings, options); | |||||
| 84 | } | 72 | } | |||
| 73 | }; | |||||
| 85 | 74 | |||||
| 86 | /* Cache container as jQuery as object. */ | 75 | /* Loop through each object and conduct a merge */ | |||
| 87 | $container = (settings.container === undefined || | 76 | for (; i < length; i++) { | |||
| 88 | settings.container === window) ? $window : $(settings.container); | 77 | let obj = arguments[i]; | |||
| 89 | 78 | merge(obj); | ||||
| 90 | /* Fire one scroll event per scroll. Not one scroll event per image. */ | |||||
| 91 | if (0 === settings.event.indexOf("scroll")) { | |||||
| 92 | $container.bind(settings.event, function() { | |||||
| 93 | return update(); | |||||
| 94 | }); | |||||
| 95 | } | 79 | } | |||
| 96 | 80 | |||||
| 97 | this.each(function() { | 81 | return extended; | |||
| 98 | var self = this; | 82 | }; | |||
| 99 | var $self = $(self); | |||||
| 100 | ||||||
| 101 | self.loaded = false; | |||||
| 102 | 83 | |||||
| 103 | /* If no src attribute given use data:uri. */ | 84 | function LazyLoad(images, options) { | |||
| 104 | //if ($self.attr("src") === undefined || $self.attr("src") === false) { | 85 | this.settings = extend(defaults, options || {}); | |||
| 105 | if ($self.is("img")) { | 86 | this.images = images || document.querySelectorAll(this.settings.selector); | |||
| 106 | $self.attr("src", settings.placeholder); | 87 | this.observer = null; | |||
| 107 | if ($self.attr("width")) | 88 | this.init(); | |||
| 108 | $self.css("height",$self.width()*$self.attr("height")/$self.attr("width") + "px"); | |||||
| 109 | } | 89 | } | |||
| 110 | //} | |||||
| 111 | 90 | |||||
| 112 | /* When appear is triggered load original image. */ | 91 | LazyLoad.prototype = { | |||
| 113 | $self.one("appear", function() { | 92 | init: function() { | |||
| 114 | if (!this.loaded) { | |||||
| 115 | if (settings.appear) { | |||||
| 116 | var elements_left = elements.length; | |||||
| 117 | settings.appear.call(self, elements_left, settings); | |||||
| 118 | } | |||||
| 119 | $("<img />") | |||||
| 120 | .bind("load", function() { | |||||
| 121 | 93 | |||||
| 122 | var original = $self.attr("data-" + settings.data_attribute), | 94 | /* Without observers load everything and bail out early. */ | |||
| 123 | srcset = $self.attr("data-" + settings.data_srcset); | 95 | if (!root.IntersectionObserver) { | |||
| 124 | $self.hide(); | 96 | this.loadImages(); | |||
| 125 | if ($self.is("img")) { | 97 | return; | |||
| 126 | $self.attr("src", original); | |||||
| 127 | if(srcset) { | |||||
| 128 | $self.attr("srcset", srcset); | |||||
| 129 | } | |||||
| 130 | } else { | |||||
| 131 | $self.css("background-image", "url('" + original + "')"); | |||||
| 132 | } | 98 | } | |||
| 133 | $self[settings.effect](settings.effect_speed); | |||||
| 134 | 99 | |||||
| 135 | self.loaded = true; | 100 | let self = this; | |||
| 101 | let observerConfig = { | |||||
| 102 | root: this.settings.root, | |||||
| 103 | rootMargin: this.settings.rootMargin, | |||||
| 104 | threshold: [this.settings.threshold] | |||||
| 105 | }; | |||||
| 136 | 106 | |||||
| 137 | /* Remove image from array so it is not looped next time. */ | 107 | this.observer = new IntersectionObserver(function(entries) { | |||
| 138 | var temp = $.grep(elements, function(element) { | 108 | Array.prototype.forEach.call(entries, function (entry) { | |||
| 139 | return !element.loaded; | 109 | if (entry.isIntersecting) { | |||
| 140 | }); | 110 | self.observer.unobserve(entry.target); | |||
| 141 | elements = $(temp); | 111 | let src = entry.target.getAttribute(self.settings.src); | |||
| 142 | $self.addClass("porto-lazyload-loaded"); | 112 | let srcset = entry.target.getAttribute(self.settings.srcset); | |||
| 143 | $self.css("height",""); | 113 | if ("img" === entry.target.tagName.toLowerCase()) { | |||
| 144 | if (settings.load) { | 114 | if (src) { | |||
| 145 | var elements_left = elements.length; | 115 | entry.target.src = src; | |||
| 146 | settings.load.call(self, elements_left, settings); | |||||
| 147 | } | 116 | } | |||
| 148 | }) | 117 | if (srcset) { | |||
| 149 | .attr("src", $self.attr("data-" + settings.data_attribute)); | 118 | entry.target.srcset = srcset; | |||
| 150 | } | 119 | } | |||
| 151 | }); | 120 | } else { | |||
| 152 | 121 | entry.target.style.backgroundImage = "url(" + src + ")"; | ||||
| 153 | /* When wanted event is triggered load original image */ | |||||
| 154 | /* by triggering appear. */ | |||||
| 155 | if (0 !== settings.event.indexOf("scroll")) { | |||||
| 156 | $self.bind(settings.event, function() { | |||||
| 157 | if (!self.loaded) { | |||||
| 158 | $self.trigger("appear"); | |||||
| 159 | } | 122 | } | |||
| 160 | }); | |||||
| 161 | } | |||||
| 162 | ||||||
| 163 | if ($self.is(":hidden") && !self.loaded) { | |||||
| 164 | $self.trigger("appear"); | |||||
| 165 | } | 123 | } | |||
| 166 | }); | 124 | }); | |||
| 125 | }, observerConfig); | |||||
| 167 | 126 | |||||
| 168 | /* Check if something appears when window is resized. */ | 127 | Array.prototype.forEach.call(this.images, function (image) { | |||
| 169 | $window.bind("resize", function() { | 128 | self.observer.observe(image); | |||
| 170 | update(); | |||||
| 171 | }); | 129 | }); | |||
| 130 | }, | |||||
| 172 | 131 | |||||
| 173 | /* With IOS5 force loading images when navigating with back button. */ | 132 | loadAndDestroy: function () { | |||
| 174 | /* Non optimal workaround. */ | 133 | if (!this.settings) { return; } | |||
| 175 | if ((/(?:iphone|ipod|ipad).*os 5/gi).test(navigator.appVersion)) { | 134 | this.loadImages(); | |||
| 176 | $window.bind("pageshow", function(event) { | 135 | this.destroy(); | |||
| 177 | if (event.originalEvent && event.originalEvent.persisted) { | 136 | }, | |||
| 178 | elements.each(function() { | |||||
| 179 | $(this).trigger("appear"); | |||||
| 180 | }); | |||||
| 181 | } | |||||
| 182 | }); | |||||
| 183 | } | |||||
| 184 | ||||||
| 185 | /* Force initial check if images should appear. */ | |||||
| 186 | $(document).ready(function() { | |||||
| 187 | update(); | |||||
| 188 | }); | |||||
| 189 | ||||||
| 190 | return this; | |||||
| 191 | }; | |||||
| 192 | ||||||
| 193 | /* Convenience methods in jQuery namespace. */ | |||||
| 194 | /* Use as $.belowthefold(element, {threshold : 100, container : window}) */ | |||||
| 195 | 137 | |||||
| 196 | $.belowthefold = function(element, settings) { | 138 | loadImages: function () { | |||
| 197 | var fold; | 139 | if (!this.settings) { return; } | |||
| 198 | 140 | |||||
| 199 | if (settings.container === undefined || settings.container === window) { | 141 | let self = this; | |||
| 200 | fold = (window.innerHeight ? window.innerHeight : $window.height()) + $window.scrollTop(); | 142 | Array.prototype.forEach.call(this.images, function (image) { | |||
| 201 | } else { | 143 | let src = image.getAttribute(self.settings.src); | |||
| 202 | fold = $(settings.container).offset().top + $(settings.container).height(); | 144 | let srcset = image.getAttribute(self.settings.srcset); | |||
| 145 | if ("img" === image.tagName.toLowerCase()) { | |||||
| 146 | if (src) { | |||||
| 147 | image.src = src; | |||||
| 203 | } | 148 | } | |||
| 204 | 149 | if (srcset) { | ||||
| 205 | return fold <= $(element).offset().top - settings.threshold; | 150 | image.srcset = srcset; | |||
| 206 | }; | |||||
| 207 | ||||||
| 208 | $.rightoffold = function(element, settings) { | |||||
| 209 | var fold; | |||||
| 210 | ||||||
| 211 | if (settings.container === undefined || settings.container === window) { | |||||
| 212 | fold = $window.width() + $window.scrollLeft(); | |||||
| 213 | } else { | |||||
| 214 | fold = $(settings.container).offset().left + $(settings.container).width(); | |||||
| 215 | } | 151 | } | |||
| 216 | ||||||
| 217 | return fold <= $(element).offset().left - settings.threshold; | |||||
| 218 | }; | |||||
| 219 | ||||||
| 220 | $.abovethetop = function(element, settings) { | |||||
| 221 | var fold; | |||||
| 222 | ||||||
| 223 | if (settings.container === undefined || settings.container === window) { | |||||
| 224 | fold = $window.scrollTop(); | |||||
| 225 | } else { | 152 | } else { | |||
| 226 | fold = $(settings.container).offset().top; | 153 | image.style.backgroundImage = "url('" + src + "')"; | |||
| 227 | } | 154 | } | |||
| 155 | }); | |||||
| 156 | }, | |||||
| 228 | 157 | |||||
| 229 | return fold >= $(element).offset().top + settings.threshold + $(element).height(); | 158 | destroy: function () { | |||
| 230 | }; | 159 | if (!this.settings) { return; } | |||
| 231 | 160 | this.observer.disconnect(); | ||||
| 232 | $.leftofbegin = function(element, settings) { | 161 | this.settings = null; | |||
| 233 | var fold; | |||||
| 234 | ||||||
| 235 | if (settings.container === undefined || settings.container === window) { | |||||
| 236 | fold = $window.scrollLeft(); | |||||
| 237 | } else { | |||||
| 238 | fold = $(settings.container).offset().left; | |||||
| 239 | } | 162 | } | |||
| 240 | ||||||
| 241 | return fold >= $(element).offset().left + settings.threshold + $(element).width(); | |||||
| 242 | }; | 163 | }; | |||
| 243 | 164 | |||||
| 244 | $.inviewport = function(element, settings) { | 165 | root.lazyload = function(images, options) { | |||
| 245 | return !$.rightoffold(element, settings) && !$.leftofbegin(element, settings) && | 166 | return new LazyLoad(images, options); | |||
| 246 | !$.belowthefold(element, settings) && !$.abovethetop(element, settings); | |||||
| 247 | }; | 167 | }; | |||
| 248 | 168 | |||||
| 249 | /* Custom selectors for your convenience. */ | 169 | if (root.jQuery) { | |||
| 250 | /* Use as $("img:below-the-fold").something() or */ | 170 | const $ = root.jQuery; | |||
| 251 | /* $("img").filter(":below-the-fold").something() which is faster */ | 171 | $.fn.lazyload = function (options) { | |||
| 252 | 172 | options = options || {}; | ||||
| 253 | $.extend($.expr[":"], { | 173 | options.attribute = options.attribute || "data-src"; | |||
| 254 | "below-the-fold" : function(a) { return $.belowthefold(a, {threshold : 0}); }, | 174 | new LazyLoad($.makeArray(this), options); | |||
| 255 | "above-the-top" : function(a) { return !$.belowthefold(a, {threshold : 0}); }, | 175 | return this; | |||
| 256 | "right-of-screen": function(a) { return $.rightoffold(a, {threshold : 0}); }, | 176 | }; | |||
| 257 | "left-of-screen" : function(a) { return !$.rightoffold(a, {threshold : 0}); }, | 177 | } | |||
| 258 | "in-viewport" : function(a) { return $.inviewport(a, {threshold : 0}); }, | |||||
| 259 | /* Maintain BC for couple of versions. */ | |||||
| 260 | "above-the-fold" : function(a) { return !$.belowthefold(a, {threshold : 0}); }, | |||||
| 261 | "right-of-fold" : function(a) { return $.rightoffold(a, {threshold : 0}); }, | |||||
| 262 | "left-of-fold" : function(a) { return !$.rightoffold(a, {threshold : 0}); } | |||||
| 263 | }); | |||||
| 264 | 178 | |||||
| 265 | })); | 179 | return LazyLoad; | |||
| 180 | }) |
Araxis Merge (but not the data content of this report) is Copyright © 1993–2019 Araxis Ltd (www.araxis.com). All rights reserved.