From 8c1c3c94be629f7a5d4823b6a754e41420feb903 Mon Sep 17 00:00:00 2001 From: Anxhelo Lushka Date: Sun, 16 Sep 2018 19:26:48 +0200 Subject: [PATCH] test for lazyloading --- _includes/head.html | 2 + css/ajax-loader.gif | Bin 3208 -> 0 bytes css/slick-theme.css | 6 +- index.html | 14 +- js/.htaccess | 3 - js/lazyload.js | 474 ++++++++++++++++---------------------------- 6 files changed, 185 insertions(+), 314 deletions(-) delete mode 100644 css/ajax-loader.gif delete mode 100644 js/.htaccess diff --git a/_includes/head.html b/_includes/head.html index 353d0c0..b6f7219 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -53,4 +53,6 @@ + + lazyload(); diff --git a/css/ajax-loader.gif b/css/ajax-loader.gif deleted file mode 100644 index 3288d1035d70bb86517e2c233f1a904e41f06b29..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3208 zcmc(iX;4#H9>pJdFE7h`I{IF)0|5<6L}(j=N}5%L009EB2nYfyF)E0PvIqo$u!IC; z4PgyY5|S9AEh38G)(9eq4TbH7_UHg@yWrlIJ$6smIADL7s^P;_O;ykRc9soXl`UC*LwQJXkii*0rx|*7rI2=x7WaRkx_~XZqFJ8R3c=2Kg zf@aSAv8+BJ8+^hyay>(QR@t*blbKzsf0}bscEqRc5Hd3o(-N5RyW=zWB*zQw6Zh>* z2CROCDAbu#D`)S|J_o(lL9Yn3l*+8RdiRD_>iNz$#_IAzCna&Wl5 zSF_(rRCDD!wi#i8oAm&jYtn2_@VB%2-H*G%bN#|(6R6N?wM)3u`PiGzwuX7qmTgyF zpE)h0kuoxQ9?=kW7Y!=R@DmhU9)vwT*EZWzJ zrt+=2tqFts72yIp?|gvdLhs8Hfku^Z(){gmN%Y=K#P|%fkvgUj~HfIp3CuXqCtYGtJ#me+n+-LmP( z*XNuk%!aH8bIE@_Bj46>M*dSro|7<6vZ7WUHh5YQzN$>IJFqCb|CT!wj~R2C2%=q{ zpt8rzY$aw?W?=Ustv{jo?Ow@ZRkLe<)NItY>Cyhle*wR59dTdF6(@{5^ zAQBOB*hNtc3bkY-8{Cm$nFS@elbTtSqrt7MB{h_4y+~`!mVa}?c&N>&?P}GqdMuhQ z&@TD5Czd((DcG_Su~dKKV)Pj$-qi1WHM8_vc^O4?^!oY|tmK~i!{fjd&@_1E(T~r7 z_REZy&hMT^ySJB3W7l$4YhR`M(J7S5S~+4Q&3HPa)z%zPpisOp$^ zTEe99ig2$5_qFr!$;7A6CJ}PJmRhli>w?LC}Y`#HLGy6 zMU4EhL~dKCN5Ut;U2jd*83ShBNiu zcJB0l9>1Modc?-oM<R4?}3g}UJ%@K);kriq>)e*rh%hdqM)5Q)*+O8 zXm;SEbs@koiYS!9YXIclSg+5m_s~yrW#kKMdiRszg(gCP5HPmP7L)vCf8@fxUh6qY z@Z#TmkjzAZX{rwE+q|K~F2v5{_@vt%>yT_a#fF03SFt{0RXvDAiaY~K9CgS1O>frXgAjBCS}mEd4mIWZ$=ovd5| zR?GRdU}d6+Q`+JRW)|=v7$)XNkn3yE`!nAiSCvOB1jKT zG<1aK3s<0b0m==egTD#8i(Of=1pGDTOCho0XpIOMQ&P87cVKY1W=C6kIg z9cH=@a&zbm2+`|{(_?YC9fdm?1TY~-pwlBn?>=(~1pDKbco6jloP;0-cqRiwV1A_S zEyV0Dj8Pwy!nekzaN>{)7rgZ&_QLxK{~1yRe865^yx>}+a!ECd>#MMwddow z@CU{l+Rt$xuXuf}?ga{3IAr?Raql^c@a%sI0U5m}HvJ5O1#I%_MMPt#BH>OqUZ{-k zt>4Xzz=%jT*FVW(uYkWyx}9Gw$HdN*qU?Bit#ji(Wi7p-u|_8?h^%szIS^s^fNM}b zgGy>|=cbEufpguY5_6w~&ZLv=Bo06UF9EYIY;Er-1VK)SyF&!|J{axiE1z^(hXwVq zsFS=K-#zC}CcOs^8W{KAt+kK)jYDgDYbCXv{{rwsgqtIU3<910$CJi)s?? z_t8k{>7*0~4l~LLF7$WXT5OSq5QCTbP_l!SN|{R}3D&eWA8~0ltWh1IL+ZBX4rRSt zWF6Om3WDMu4xK^1(BF`2cL}rUCzhHAB`@j5&R-yk_l*t;mPGY|u2^o|myvcOdrg0W z%=lX;f^Vkqfp?u7*4qQq%A3Mpf!xspWBSKS@O%r*TSM}?dl(@*%{0Jm_8;(h{R__M Bt
- +

Design, but Open

@@ -158,7 +158,7 @@ clients:
{% for client in page.clients %} -
+
{% endfor %}
@@ -181,7 +181,7 @@ clients:
- author + author

{{testimonial.content}}

@@ -196,7 +196,7 @@ clients:
- author + author

{{testimonial.content}}

@@ -226,7 +226,7 @@ clients: {% for work in page.works_left %}
- +

{{work.title}}

{{work.categories}}

@@ -239,7 +239,7 @@ clients: {% for work in page.works_middle %}
- +

{{work.title}}

{{work.categories}}

@@ -252,7 +252,7 @@ clients: {% for work in page.works_right %}
- +

{{work.title}}

{{work.categories}}

diff --git a/js/.htaccess b/js/.htaccess deleted file mode 100644 index 28cf99f..0000000 --- a/js/.htaccess +++ /dev/null @@ -1,3 +0,0 @@ - -Header set Cache-Control "max-age=15778476, public" - diff --git a/js/lazyload.js b/js/lazyload.js index bdf9180..fc7fdf7 100644 --- a/js/lazyload.js +++ b/js/lazyload.js @@ -1,301 +1,173 @@ -var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; - -var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; - -(function (global, factory) { - (typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : global.LazyLoad = factory(); -})(this, function () { - 'use strict'; - - var getInstanceSettings = function getInstanceSettings(customSettings) { - var defaultSettings = { - elements_selector: "img", - container: document, - threshold: 300, - data_src: "src", - data_srcset: "srcset", - data_sizes: "sizes", - class_loading: "loading", - class_loaded: "loaded", - class_error: "error", - callback_load: null, - callback_error: null, - callback_set: null, - callback_enter: null - }; - - return _extends({}, defaultSettings, customSettings); - }; - - var dataPrefix = "data-"; - var processedDataName = "was-processed"; - var processedDataValue = "true"; - - var getData = function getData(element, attribute) { - return element.getAttribute(dataPrefix + attribute); - }; - - var setData = function setData(element, attribute, value) { - return element.setAttribute(dataPrefix + attribute, value); - }; - - var setWasProcessed = function setWasProcessed(element) { - return setData(element, processedDataName, processedDataValue); - }; - - var getWasProcessed = function getWasProcessed(element) { - return getData(element, processedDataName) === processedDataValue; - }; - - function purgeElements(elements) { - return elements.filter(function (element) { - return !getWasProcessed(element); - }); - } - - /* Creates instance and notifies it through the window element */ - var createInstance = function createInstance(classObj, options) { - var event; - var eventString = "LazyLoad::Initialized"; - var instance = new classObj(options); - try { - // Works in modern browsers - event = new CustomEvent(eventString, { detail: { instance: instance } }); - } catch (err) { - // Works in Internet Explorer (all versions) - event = document.createEvent("CustomEvent"); - event.initCustomEvent(eventString, false, false, { instance: instance }); - } - window.dispatchEvent(event); - }; - - /* Auto initialization of one or more instances of lazyload, depending on the - options passed in (plain object or an array) */ - function autoInitialize(classObj, options) { - if (!options.length) { - // Plain object - createInstance(classObj, options); - } else { - // Array of objects - for (var i = 0, optionsItem; optionsItem = options[i]; i += 1) { - createInstance(classObj, optionsItem); - } - } - } - - var setSourcesInChildren = function setSourcesInChildren(parentTag, attrName, dataAttrName) { - for (var i = 0, childTag; childTag = parentTag.children[i]; i += 1) { - if (childTag.tagName === "SOURCE") { - var attributeValue = getData(childTag, dataAttrName); - if (attributeValue) { - childTag.setAttribute(attrName, attributeValue); - } - } - } - }; - - var setAttributeIfNotNullOrEmpty = function setAttributeIfNotNullOrEmpty(element, attrName, value) { - if (!value) { - return; - } - element.setAttribute(attrName, value); - }; - - var setSources = function setSources(element, settings) { - var sizesDataName = settings.data_sizes, - srcsetDataName = settings.data_srcset, - srcDataName = settings.data_src; - - var srcDataValue = getData(element, srcDataName); - switch (element.tagName) { - case "IMG": - { - var parent = element.parentNode; - if (parent && parent.tagName === "PICTURE") { - setSourcesInChildren(parent, "srcset", srcsetDataName); - } - var sizesDataValue = getData(element, sizesDataName); - setAttributeIfNotNullOrEmpty(element, "sizes", sizesDataValue); - var srcsetDataValue = getData(element, srcsetDataName); - setAttributeIfNotNullOrEmpty(element, "srcset", srcsetDataValue); - setAttributeIfNotNullOrEmpty(element, "src", srcDataValue); - break; - } - case "IFRAME": - setAttributeIfNotNullOrEmpty(element, "src", srcDataValue); - break; - case "VIDEO": - setSourcesInChildren(element, "src", srcDataName); - setAttributeIfNotNullOrEmpty(element, "src", srcDataValue); - break; - default: - if (srcDataValue) { - element.style.backgroundImage = 'url("' + srcDataValue + '")'; - } - } - }; - - var isBot = "onscroll" in window && !/glebot/.test(navigator.userAgent); - - var runningOnBrowser = typeof window !== "undefined"; - - var supportsIntersectionObserver = runningOnBrowser && "IntersectionObserver" in window; - - var supportsClassList = runningOnBrowser && "classList" in document.createElement("p"); - - var addClass = function addClass(element, className) { - if (supportsClassList) { - element.classList.add(className); - return; - } - element.className += (element.className ? " " : "") + className; - }; - - var removeClass = function removeClass(element, className) { - if (supportsClassList) { - element.classList.remove(className); - return; - } - element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " ").replace(/^\s+/, "").replace(/\s+$/, ""); - }; - - var callCallback = function callCallback(callback, argument) { - if (callback) { - callback(argument); - } - }; - - var loadString = "load"; - var errorString = "error"; - - var removeListeners = function removeListeners(element, loadHandler, errorHandler) { - element.removeEventListener(loadString, loadHandler); - element.removeEventListener(errorString, errorHandler); - }; - - var addOneShotListeners = function addOneShotListeners(element, settings) { - var onLoad = function onLoad(event) { - onEvent(event, true, settings); - removeListeners(element, onLoad, onError); - }; - var onError = function onError(event) { - onEvent(event, false, settings); - removeListeners(element, onLoad, onError); - }; - element.addEventListener(loadString, onLoad); - element.addEventListener(errorString, onError); - }; - - var onEvent = function onEvent(event, success, settings) { - var element = event.target; - removeClass(element, settings.class_loading); - addClass(element, success ? settings.class_loaded : settings.class_error); // Setting loaded or error class - callCallback(success ? settings.callback_load : settings.callback_error, element); - }; - - function revealElement(element, settings, force) { - if (!force && getWasProcessed(element)) { - return; // element has already been processed and force wasn't true - } - callCallback(settings.callback_enter, element); - if (["IMG", "IFRAME", "VIDEO"].indexOf(element.tagName) > -1) { - addOneShotListeners(element, settings); - addClass(element, settings.class_loading); - } - setSources(element, settings); - setWasProcessed(element); - callCallback(settings.callback_set, element); - } - - /* entry.isIntersecting needs fallback because is null on some versions of MS Edge, and - entry.intersectionRatio is not enough alone because it could be 0 on some intersecting elements */ - var isIntersecting = function isIntersecting(element) { - return element.isIntersecting || element.intersectionRatio > 0; - }; - - var getObserverSettings = function getObserverSettings(settings) { - return { - root: settings.container === document ? null : settings.container, - rootMargin: settings.threshold + "px" - }; - }; - - var LazyLoad = function LazyLoad(customSettings, elements) { - this._settings = getInstanceSettings(customSettings); - this._setObserver(); - this.update(elements); - }; - - LazyLoad.prototype = { - _setObserver: function _setObserver() { - var _this = this; - - if (!supportsIntersectionObserver) { - return; - } - var revealIntersectingElements = function revealIntersectingElements(entries) { - entries.forEach(function (entry) { - if (isIntersecting(entry)) { - var element = entry.target; - _this.load(element); - _this._observer.unobserve(element); - } - }); - _this._elements = purgeElements(_this._elements); - }; - this._observer = new IntersectionObserver(revealIntersectingElements, getObserverSettings(this._settings)); - }, - - loadAll: function loadAll() { - var _this2 = this; - - this._elements.forEach(function (element) { - _this2.load(element); - }); - this._elements = purgeElements(this._elements); - }, - - update: function update(elements) { - var _this3 = this; - - var settings = this._settings; - var nodeSet = elements || settings.container.querySelectorAll(settings.elements_selector); - - this._elements = purgeElements(Array.prototype.slice.call(nodeSet)); // nodeset to array for IE compatibility - - if (isBot || !this._observer) { - this.loadAll(); - return; - } - - this._elements.forEach(function (element) { - _this3._observer.observe(element); - }); - }, - - destroy: function destroy() { - var _this4 = this; - - if (this._observer) { - purgeElements(this._elements).forEach(function (element) { - _this4._observer.unobserve(element); - }); - this._observer = null; - } - this._elements = null; - this._settings = null; - }, - - load: function load(element, force) { - revealElement(element, this._settings, force); - } - }; - - /* Automatic instances creation if required (useful for async script loading!) */ - var autoInitOptions = window.lazyLoadOptions; - if (runningOnBrowser && autoInitOptions) { - autoInitialize(LazyLoad, autoInitOptions); - } - - return LazyLoad; -}); \ No newline at end of file +/*! + * Lazy Load - JavaScript plugin for lazy loading images + * + * Copyright (c) 2007-2017 Mika Tuupola + * + * Licensed under the MIT license: + * http://www.opensource.org/licenses/mit-license.php + * + * Project home: + * https://appelsiini.net/projects/lazyload + * + * Version: 2.0.0-beta.2 + * + */ + +(function (root, factory) { + if (typeof exports === "object") { + module.exports = factory(root); + } else if (typeof define === "function" && define.amd) { + define([], factory(root)); + } else { + root.LazyLoad = factory(root); + } +}) (typeof global !== "undefined" ? global : this.window || this.global, function (root) { + + "use strict"; + + const defaults = { + src: "data-src", + srcset: "data-srcset", + selector: ".lazyload" + }; + + /** + * Merge two or more objects. Returns a new object. + * @private + * @param {Boolean} deep If true, do a deep (or recursive) merge [optional] + * @param {Object} objects The objects to merge together + * @returns {Object} Merged values of defaults and options + */ + const extend = function () { + + let extended = {}; + let deep = false; + let i = 0; + let length = arguments.length; + + /* Check if a deep merge */ + if (Object.prototype.toString.call(arguments[0]) === "[object Boolean]") { + deep = arguments[0]; + i++; + } + + /* Merge the object into the extended object */ + let merge = function (obj) { + for (let prop in obj) { + if (Object.prototype.hasOwnProperty.call(obj, prop)) { + /* If deep merge and property is an object, merge properties */ + if (deep && Object.prototype.toString.call(obj[prop]) === "[object Object]") { + extended[prop] = extend(true, extended[prop], obj[prop]); + } else { + extended[prop] = obj[prop]; + } + } + } + }; + + /* Loop through each object and conduct a merge */ + for (; i < length; i++) { + let obj = arguments[i]; + merge(obj); + } + + return extended; + }; + + function LazyLoad(images, options) { + this.settings = extend(defaults, options || {}); + this.images = images || document.querySelectorAll(this.settings.selector); + this.observer = null; + this.init(); + } + + LazyLoad.prototype = { + init: function() { + + /* Without observers load everything and bail out early. */ + if (!root.IntersectionObserver) { + this.loadImages(); + return; + } + + let self = this; + let observerConfig = { + root: null, + rootMargin: "0px", + threshold: [0] + }; + + this.observer = new IntersectionObserver(function(entries) { + entries.forEach(function (entry) { + if (entry.intersectionRatio > 0) { + self.observer.unobserve(entry.target); + let src = entry.target.getAttribute(self.settings.src); + let srcset = entry.target.getAttribute(self.settings.srcset); + if ("img" === entry.target.tagName.toLowerCase()) { + if (src) { + entry.target.src = src; + } + if (srcset) { + entry.target.srcset = srcset; + } + } else { + entry.target.style.backgroundImage = "url(" + src + ")"; + } + } + }); + }, observerConfig); + + this.images.forEach(function (image) { + self.observer.observe(image); + }); + }, + + loadAndDestroy: function () { + if (!this.settings) { return; } + this.loadImages(); + this.destroy(); + }, + + loadImages: function () { + if (!this.settings) { return; } + + let self = this; + this.images.forEach(function (image) { + let src = image.getAttribute(self.settings.src); + let srcset = image.getAttribute(self.settings.srcset); + if ("img" === image.tagName.toLowerCase()) { + if (src) { + image.src = src; + } + if (srcset) { + image.srcset = srcset; + } + } else { + image.style.backgroundImage = "url(" + src + ")"; + } + }); + }, + + destroy: function () { + if (!this.settings) { return; } + this.observer.disconnect(); + this.settings = null; + } + }; + + root.lazyload = function(images, options) { + return new LazyLoad(images, options); + }; + + if (root.jQuery) { + const $ = root.jQuery; + $.fn.lazyload = function (options) { + options = options || {}; + options.attribute = options.attribute || "data-src"; + new LazyLoad($.makeArray(this), options); + return this; + }; + } + + return LazyLoad; +});