From 1a212c94477c3b1479e0087fc248f63131fa5661 Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi Date: Tue, 17 Jul 2018 09:17:24 +0200 Subject: [PATCH 01/19] Converted series of if into a switch --- src/lazyload.setSources.js | 46 +++++++++++++++++++------------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/src/lazyload.setSources.js b/src/lazyload.setSources.js index a19769bb..bf048acf 100644 --- a/src/lazyload.setSources.js +++ b/src/lazyload.setSources.js @@ -29,29 +29,29 @@ export const setSources = function(element, settings) { data_src: srcDataName } = settings; const srcDataValue = getData(element, srcDataName); - const tagName = element.tagName; - if (tagName === "IMG") { - const parent = element.parentNode; - if (parent && parent.tagName === "PICTURE") { - setSourcesInChildren(parent, "srcset", srcsetDataName); + switch (element.tagName) { + case "IMG": { + const parent = element.parentNode; + if (parent && parent.tagName === "PICTURE") { + setSourcesInChildren(parent, "srcset", srcsetDataName); + } + const sizesDataValue = getData(element, sizesDataName); + setAttributeIfNotNullOrEmpty(element, "sizes", sizesDataValue); + const srcsetDataValue = getData(element, srcsetDataName); + setAttributeIfNotNullOrEmpty(element, "srcset", srcsetDataValue); + setAttributeIfNotNullOrEmpty(element, "src", srcDataValue); + break; } - const sizesDataValue = getData(element, sizesDataName); - setAttributeIfNotNullOrEmpty(element, "sizes", sizesDataValue); - const srcsetDataValue = getData(element, srcsetDataName); - setAttributeIfNotNullOrEmpty(element, "srcset", srcsetDataValue); - setAttributeIfNotNullOrEmpty(element, "src", srcDataValue); - return; - } - if (tagName === "IFRAME") { - setAttributeIfNotNullOrEmpty(element, "src", srcDataValue); - return; - } - if (tagName === "VIDEO") { - setSourcesInChildren(element, "src", srcDataName); - setAttributeIfNotNullOrEmpty(element, "src", srcDataValue); - return; - } - if (srcDataValue) { - element.style.backgroundImage = `url("${srcDataValue}")`; + 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}")`; + } } }; From 17407d3f0ccf8c167ac64f6cb3a8bc60f346fc59 Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi Date: Tue, 17 Jul 2018 09:58:53 +0200 Subject: [PATCH 02/19] Todo++ --- todo.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/todo.md b/todo.md index 7c48a5db..7d09e788 100644 --- a/todo.md +++ b/todo.md @@ -1,6 +1,11 @@ TODO ==== +* Missing documenation + * Constructor takes a nodeset as 2nd parameter, see 10.2 release + * `update()` takes with the NodeSet object - see 10.2 release +* Remove that Array.prototype.slice.call and use Array.from on the elements nodeset? +* PurgeElements can be avoided if we `querySelectorAll` with a "not `[data-was-processed]`" selector? * Test more modules * autoinitialize * purge From 638ecfad64ac5bd3b6af86530422776c53e15483 Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi Date: Wed, 18 Jul 2018 07:41:16 +0200 Subject: [PATCH 03/19] added the `load(element)` method --- src/lazyload.js | 132 ++++++++++++++++++++++++++---------------------- 1 file changed, 72 insertions(+), 60 deletions(-) diff --git a/src/lazyload.js b/src/lazyload.js index d3ce131b..a644da50 100644 --- a/src/lazyload.js +++ b/src/lazyload.js @@ -2,78 +2,90 @@ import getInstanceSettings from "./lazyload.defaults"; import purgeElements from "./lazyload.purge"; import autoInitialize from "./lazyload.autoInitialize"; import revealElement from "./lazyload.reveal"; -import {isIntersecting} from "./lazyload.intersectionObserver"; -import {runningOnBrowser, supportsIntersectionObserver} from "./lazyload.environment"; +import { isIntersecting } from "./lazyload.intersectionObserver"; +import { + runningOnBrowser, + supportsIntersectionObserver +} from "./lazyload.environment"; -const LazyLoad = function (customSettings, elements) { - this._settings = getInstanceSettings(customSettings); - this._setObserver(); - this.update(elements); +const LazyLoad = function(customSettings, elements) { + this._settings = getInstanceSettings(customSettings); + this._setObserver(); + this.update(elements); }; LazyLoad.prototype = { - _setObserver: function () { - if (!supportsIntersectionObserver) { - return; - } + _setObserver: function() { + if (!supportsIntersectionObserver) { + return; + } - const settings = this._settings; - const observerSettings = { - root: settings.container === document ? null : settings.container, - rootMargin: settings.threshold + "px" - }; - const revealIntersectingElements = (entries) => { - entries.forEach(entry => { - if (isIntersecting(entry)) { - let element = entry.target; - revealElement(element, this._settings); - this._observer.unobserve(element); - } - }); - this._elements = purgeElements(this._elements); - }; - this._observer = new IntersectionObserver(revealIntersectingElements, observerSettings); - }, + const settings = this._settings; + const observerSettings = { + root: settings.container === document ? null : settings.container, + rootMargin: settings.threshold + "px" + }; + const revealIntersectingElements = entries => { + entries.forEach(entry => { + if (isIntersecting(entry)) { + let element = entry.target; + revealElement(element, this._settings); + this._observer.unobserve(element); + } + }); + this._elements = purgeElements(this._elements); + }; + this._observer = new IntersectionObserver( + revealIntersectingElements, + observerSettings + ); + }, - loadAll: function() { - const settings = this._settings; - // Fallback: load all elements at once - this._elements.forEach(element => { - revealElement(element, settings); - }); - this._elements = purgeElements(this._elements); - }, + loadAll: function() { + const settings = this._settings; + // Fallback: load all elements at once + this._elements.forEach(element => { + revealElement(element, settings); + }); + this._elements = purgeElements(this._elements); + }, - update: function (elements) { - const settings = this._settings; - const nodeSet = elements || settings.container.querySelectorAll(settings.elements_selector); + update: function(elements) { + const settings = this._settings; + const nodeSet = + elements || + settings.container.querySelectorAll(settings.elements_selector); - this._elements = purgeElements(Array.prototype.slice.call(nodeSet)); // nodeset to array for IE compatibility - if (this._observer) { - this._elements.forEach(element => { - this._observer.observe(element); - }); - return; - } - this.loadAll(); - }, + this._elements = purgeElements(Array.prototype.slice.call(nodeSet)); // nodeset to array for IE compatibility + if (this._observer) { + this._elements.forEach(element => { + this._observer.observe(element); + }); + return; + } + this.loadAll(); + }, - destroy: function () { - if (this._observer) { - purgeElements(this._elements).forEach(element => { - this._observer.unobserve(element); - }); - this._observer = null; - } - this._elements = null; - this._settings = null; - } -} + destroy: function() { + if (this._observer) { + purgeElements(this._elements).forEach(element => { + this._observer.unobserve(element); + }); + this._observer = null; + } + this._elements = null; + this._settings = null; + }, + + load: function(element) { + revealElement(element, this._settings); + } +}; /* Automatic instances creation if required (useful for async script loading!) */ let autoInitOptions = window.lazyLoadOptions; if (runningOnBrowser && autoInitOptions) { - autoInitialize(LazyLoad, autoInitOptions); + autoInitialize(LazyLoad, autoInitOptions); } -export default LazyLoad; \ No newline at end of file +export default LazyLoad; From d9121a76c165a6afbed54f31d40c9f4651b058bb Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi Date: Wed, 18 Jul 2018 23:12:21 +0200 Subject: [PATCH 04/19] Added 10.9.0 to Changelog --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index b8714cec..2cc5d28b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,10 @@ ## Version 10 +#### 10.9.0 + +Added a public `load` method to force loading any element. + #### 10.8.0 Added a public `loadAll` method to force loading all the images, as asked in #193. From 7b54da552fcab2d7daf93b6d24bdf7833cff1279 Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi Date: Wed, 18 Jul 2018 23:18:35 +0200 Subject: [PATCH 05/19] Added construction options to docs --- README.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/README.md b/README.md index 7ef9955b..97d74ffe 100644 --- a/README.md +++ b/README.md @@ -528,6 +528,30 @@ img[data-srcset] { ## API +### Constructor arguments + +The `new LazyLoad()` instruction you execute on your page can take 2 parameters + +| Required | What to pass | Type | Default value | +| -------- | ----------------------------------------------- | ------- | ------------- | +| No | The option object for this instance of LazyLoad | Plain Object | `{}` | +| No | A NodeSet of elements to execute LazyLoad on | NodeSet | `null` | + +The most common usage of LazyLoad constructor is to pass only the options object (see "options" in the next section). For example: + +```js +var lazyLoadOptions = { /* options here */ }; +var aLazyLoad = new LazyLoad(lazyLoadOptions); +``` + +In the rare cases where you can't or don't want to select the elements using `elements_selector` and you have a reference variable to your elements set (can be a NodeSet or an array of elements), you can pass the elements set as second parameter. + +```js +var lazyLoadOptions = { /* options here */ }; +var elementsToLazyLoad = getElementSetFromSomewhere(); +var aLazyLoad = new LazyLoad(lazyLoadOptions, elementsToLazyLoad); +``` + ### Options For every instance of _LazyLoad_ you can pass in some options, to alter its default behaviour. From 52d94c83f84580d238b8e570f34799c1c144b5bd Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi Date: Thu, 19 Jul 2018 23:03:58 +0200 Subject: [PATCH 06/19] Beautified --- src/lazyload.class.js | 27 +++++++++++++++------------ 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/src/lazyload.class.js b/src/lazyload.class.js index e71d77cc..32d27912 100644 --- a/src/lazyload.class.js +++ b/src/lazyload.class.js @@ -1,17 +1,20 @@ -import {supportsClassList} from "./lazyload.environment"; +import { supportsClassList } from "./lazyload.environment"; export const addClass = (element, className) => { - if (supportsClassList) { - element.classList.add(className); - return; - } - element.className += (element.className ? " " : "") + className; + if (supportsClassList) { + element.classList.add(className); + return; + } + element.className += (element.className ? " " : "") + className; }; export const removeClass = (element, className) => { - if (supportsClassList) { - element.classList.remove(className); - return; - } - element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " ").replace(/^\s+/, "").replace(/\s+$/, ""); -}; \ No newline at end of file + if (supportsClassList) { + element.classList.remove(className); + return; + } + element.className = element.className. + replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " "). + replace(/^\s+/, ""). + replace(/\s+$/, ""); +}; From 86436bd7d9e7df0bd0d94270248803abc303deae Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi Date: Thu, 19 Jul 2018 23:24:42 +0200 Subject: [PATCH 07/19] Added `load` to docs --- README.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index d724a5fc..3a023672 100644 --- a/README.md +++ b/README.md @@ -577,11 +577,12 @@ Here's the list of the options. You can call the following public methods on any instance of LazyLoad. -| Method name | Effect | -|------------------|------------------------------------------------------------------------------------------------------| -| `update()` | Tells _LazyLoad_ that new lazy images have arrived in the container, so it must start to manage them. | -| `loadAll()` | Forces _LazyLoad_ to load all the images at once, instead of lazily loading them. | -| `destroy()` | Destroys the instance, unsetting instance variables and removing listeners. | +| Method name | Effect | +|------------------|-------------------------------------------------------------------------------------------------------| +| `update()` | Make LazyLoad to check for new lazy images in the container, using the `elements_selector` option. | +| `loadAll()` | Loads all the lazy images right away, no matter if they are inside or outside the viewport. | +| `load(element, force)` | Immediately loads any lazy `element`, even if it isn't selectable by the `elements_selector` option. Note that this method works only once on a specific `element`, unless you force it passing `true` as second parameter. | +| `destroy()` | Destroys the instance, unsetting instance variables and removing listeners. | ## Notable features From a2f01bc230c227bffd12632bf8868e582e261655 Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi Date: Thu, 19 Jul 2018 23:25:23 +0200 Subject: [PATCH 08/19] Added something to do later --- todo.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/todo.md b/todo.md index 7d09e788..d70fbb11 100644 --- a/todo.md +++ b/todo.md @@ -9,4 +9,7 @@ TODO * Test more modules * autoinitialize * purge - * reveal \ No newline at end of file + * reveal +* revealElement (breaking change) + * now that .load() and .loadAll() now exist, in the `reveal` function we should have another callback to notify "start loading" and `callback_enter` should be moved outside of the `reveal` function, just to notify that the element entered the viewport -- BREAKING CHANGE! +* check why on load.html the "loaded" callback is called twice in some cases \ No newline at end of file From fb934737ec29f926138d3128a05c5fb03af6eb43 Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi Date: Thu, 19 Jul 2018 23:26:09 +0200 Subject: [PATCH 09/19] Added a demo for the load method --- demos/load.html | 191 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 191 insertions(+) create mode 100644 demos/load.html diff --git a/demos/load.html b/demos/load.html new file mode 100644 index 00000000..ce96a5a8 --- /dev/null +++ b/demos/load.html @@ -0,0 +1,191 @@ + + + + + + LazyLoad load() demo + + + + + +
+ + + 01a + 01b +

Product 01

+ + + 02a + 02b +

Product 02

+ + + 03a + 03b +

Product 03

+ + + 04a + 04b +

Product 04

+ + + 05a + 05b +

Product 05

+ + + 06a + 06b +

Product 06

+ + + 07a + 07b +

Product 07

+ + + 08a + 08b +

Product 08

+ + + + 09a + 09b +

Product 09

+ + + 10a + 10b +

Product 10

+ + + 11a + 11b +

Product 11

+ + + 12a + 12b +

Product 12

+ + + 13a + 13b +

Product 13

+ + + 14a + 14b +

Product 14

+ + + 15a + 15b +

Product 15

+ + + 16a + 16b +

Product 16

+ +
+ + + + + + \ No newline at end of file From 2f58f35cef981762adcbbc3d0f13a6ab722ef518 Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi Date: Thu, 19 Jul 2018 23:29:27 +0200 Subject: [PATCH 10/19] Prettifiles --- src/lazyload.data.js | 8 ++--- src/lazyload.purge.js | 12 +++---- src/lazyload.reveal.js | 73 ++++++++++++++++++++++-------------------- 3 files changed, 48 insertions(+), 45 deletions(-) diff --git a/src/lazyload.data.js b/src/lazyload.data.js index c542c044..6442fca6 100644 --- a/src/lazyload.data.js +++ b/src/lazyload.data.js @@ -1,9 +1,9 @@ const dataPrefix = "data-"; export const getData = (element, attribute) => { - return element.getAttribute(dataPrefix + attribute); -} + return element.getAttribute(dataPrefix + attribute); +}; export const setData = (element, attribute, value) => { - return element.setAttribute(dataPrefix + attribute, value); -} \ No newline at end of file + return element.setAttribute(dataPrefix + attribute, value); +}; diff --git a/src/lazyload.purge.js b/src/lazyload.purge.js index b617c4fc..bd46fb74 100644 --- a/src/lazyload.purge.js +++ b/src/lazyload.purge.js @@ -1,7 +1,7 @@ -import {getData} from "./lazyload.data"; +import { getData } from "./lazyload.data"; -export default function (elements) { - return elements.filter((element) => { - return !getData(element, "was-processed"); - }); -} \ No newline at end of file +export default function(elements) { + return elements.filter(element => { + return !getData(element, "was-processed"); + }); +} diff --git a/src/lazyload.reveal.js b/src/lazyload.reveal.js index 707215ad..33a780e7 100644 --- a/src/lazyload.reveal.js +++ b/src/lazyload.reveal.js @@ -1,48 +1,51 @@ -import {setSources} from "./lazyload.setSources"; -import {setData} from "./lazyload.data"; -import {addClass, removeClass} from "./lazyload.class"; +import { setSources } from "./lazyload.setSources"; +import { setData } from "./lazyload.data"; +import { addClass, removeClass } from "./lazyload.class"; -const callCallback = function (callback, argument) { - if (callback) { - callback(argument); - } +const callCallback = function(callback, argument) { + if (callback) { + callback(argument); + } }; const loadString = "load"; const errorString = "error"; const removeListeners = function(element, loadHandler, errorHandler) { - element.removeEventListener(loadString, loadHandler); - element.removeEventListener(errorString, errorHandler); + element.removeEventListener(loadString, loadHandler); + element.removeEventListener(errorString, errorHandler); }; const addOneShotListeners = function(element, settings) { - const onLoad = (event) => { - onEvent(event, true, settings); - removeListeners(element, onLoad, onError); - } - const onError = (event) => { - onEvent(event, false, settings); - removeListeners(element, onLoad, onError); - } - element.addEventListener(loadString, onLoad); - element.addEventListener(errorString, onError); + const onLoad = event => { + onEvent(event, true, settings); + removeListeners(element, onLoad, onError); + }; + const onError = event => { + onEvent(event, false, settings); + removeListeners(element, onLoad, onError); + }; + element.addEventListener(loadString, onLoad); + element.addEventListener(errorString, onError); }; -const onEvent = function (event, success, settings) { - const 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); // Calling loaded or error callback -} +const onEvent = function(event, success, settings) { + const 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 + ); // Calling loaded or error callback +}; -export default function (element, settings) { - callCallback(settings.callback_enter, element); - if (["IMG", "IFRAME", "VIDEO"].indexOf(element.tagName) > -1) { - addOneShotListeners(element, settings); - addClass(element, settings.class_loading); - } - setSources(element, settings); - setData(element, "was-processed", true); - callCallback(settings.callback_set, element); -}; \ No newline at end of file +export default function(element, settings) { + callCallback(settings.callback_enter, element); + if (["IMG", "IFRAME", "VIDEO"].indexOf(element.tagName) > -1) { + addOneShotListeners(element, settings); + addClass(element, settings.class_loading); + } + setSources(element, settings); + setData(element, "was-processed", true); + callCallback(settings.callback_set, element); +} From e95419c051fda934fd71f6702721e472457a5348 Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi Date: Thu, 19 Jul 2018 23:32:30 +0200 Subject: [PATCH 11/19] Introduced a check on `data-was-processed` in the `load` method --- dist/lazyload.es2015.js | 282 +++++++++++--------- dist/lazyload.js | 560 +++++++++++++++++++++------------------- dist/lazyload.min.js | 2 +- src/lazyload.data.js | 8 + src/lazyload.js | 4 +- src/lazyload.purge.js | 6 +- src/lazyload.reveal.js | 11 +- 7 files changed, 462 insertions(+), 411 deletions(-) diff --git a/dist/lazyload.es2015.js b/dist/lazyload.es2015.js index 9c9e1154..aa5e197c 100644 --- a/dist/lazyload.es2015.js +++ b/dist/lazyload.es2015.js @@ -25,19 +25,25 @@ var getInstanceSettings = (customSettings) => { }; const dataPrefix = "data-"; +const processedDataName = "was-processed"; +const processedDataValue = "true"; const getData = (element, attribute) => { - return element.getAttribute(dataPrefix + attribute); + return element.getAttribute(dataPrefix + attribute); }; const setData = (element, attribute, value) => { - return element.setAttribute(dataPrefix + attribute, value); + return element.setAttribute(dataPrefix + attribute, value); }; -function purgeElements (elements) { - return elements.filter((element) => { - return !getData(element, "was-processed"); - }); +const setWasProcessed = element => + setData(element, processedDataName, processedDataValue); + +const getWasProcessed = element => + getData(element, processedDataName) === processedDataValue; + +function purgeElements(elements) { + return elements.filter(element => !getWasProcessed(element)); } /* Creates instance and notifies it through the window element */ @@ -100,30 +106,30 @@ const setSources = function(element, settings) { data_src: srcDataName } = settings; const srcDataValue = getData(element, srcDataName); - const tagName = element.tagName; - if (tagName === "IMG") { - const parent = element.parentNode; - if (parent && parent.tagName === "PICTURE") { - setSourcesInChildren(parent, "srcset", srcsetDataName); + switch (element.tagName) { + case "IMG": { + const parent = element.parentNode; + if (parent && parent.tagName === "PICTURE") { + setSourcesInChildren(parent, "srcset", srcsetDataName); + } + const sizesDataValue = getData(element, sizesDataName); + setAttributeIfNotNullOrEmpty(element, "sizes", sizesDataValue); + const srcsetDataValue = getData(element, srcsetDataName); + setAttributeIfNotNullOrEmpty(element, "srcset", srcsetDataValue); + setAttributeIfNotNullOrEmpty(element, "src", srcDataValue); + break; } - const sizesDataValue = getData(element, sizesDataName); - setAttributeIfNotNullOrEmpty(element, "sizes", sizesDataValue); - const srcsetDataValue = getData(element, srcsetDataName); - setAttributeIfNotNullOrEmpty(element, "srcset", srcsetDataValue); - setAttributeIfNotNullOrEmpty(element, "src", srcDataValue); - return; - } - if (tagName === "IFRAME") { - setAttributeIfNotNullOrEmpty(element, "src", srcDataValue); - return; - } - if (tagName === "VIDEO") { - setSourcesInChildren(element, "src", srcDataName); - setAttributeIfNotNullOrEmpty(element, "src", srcDataValue); - return; - } - if (srcDataValue) { - element.style.backgroundImage = `url("${srcDataValue}")`; + 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}")`; + } } }; @@ -134,139 +140,157 @@ const supportsIntersectionObserver = runningOnBrowser && ("IntersectionObserver" const supportsClassList = runningOnBrowser && ("classList" in document.createElement("p")); const addClass = (element, className) => { - if (supportsClassList) { - element.classList.add(className); - return; - } - element.className += (element.className ? " " : "") + className; + if (supportsClassList) { + element.classList.add(className); + return; + } + element.className += (element.className ? " " : "") + className; }; const removeClass = (element, className) => { - if (supportsClassList) { - element.classList.remove(className); - return; - } - element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " ").replace(/^\s+/, "").replace(/\s+$/, ""); + if (supportsClassList) { + element.classList.remove(className); + return; + } + element.className = element.className. + replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " "). + replace(/^\s+/, ""). + replace(/\s+$/, ""); }; -const callCallback = function (callback, argument) { - if (callback) { - callback(argument); - } +const callCallback = function(callback, argument) { + if (callback) { + callback(argument); + } }; const loadString = "load"; const errorString = "error"; const removeListeners = function(element, loadHandler, errorHandler) { - element.removeEventListener(loadString, loadHandler); - element.removeEventListener(errorString, errorHandler); + element.removeEventListener(loadString, loadHandler); + element.removeEventListener(errorString, errorHandler); }; const addOneShotListeners = function(element, settings) { - const onLoad = (event) => { - onEvent(event, true, settings); - removeListeners(element, onLoad, onError); - }; - const onError = (event) => { - onEvent(event, false, settings); - removeListeners(element, onLoad, onError); - }; - element.addEventListener(loadString, onLoad); - element.addEventListener(errorString, onError); + const onLoad = event => { + onEvent(event, true, settings); + removeListeners(element, onLoad, onError); + }; + const onError = event => { + onEvent(event, false, settings); + removeListeners(element, onLoad, onError); + }; + element.addEventListener(loadString, onLoad); + element.addEventListener(errorString, onError); }; -const onEvent = function (event, success, settings) { - const 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); // Calling loaded or error callback +const onEvent = function(event, success, settings) { + const 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) { - callCallback(settings.callback_enter, element); - if (["IMG", "IFRAME", "VIDEO"].indexOf(element.tagName) > -1) { - addOneShotListeners(element, settings); - addClass(element, settings.class_loading); - } - setSources(element, settings); - setData(element, "was-processed", true); - callCallback(settings.callback_set, 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 */ const isIntersecting = (element) => element.isIntersecting || element.intersectionRatio > 0; -const LazyLoad = function (customSettings, elements) { - this._settings = getInstanceSettings(customSettings); - this._setObserver(); - this.update(elements); +const LazyLoad = function(customSettings, elements) { + this._settings = getInstanceSettings(customSettings); + this._setObserver(); + this.update(elements); }; LazyLoad.prototype = { - _setObserver: function () { - if (!supportsIntersectionObserver) { - return; - } + _setObserver: function() { + if (!supportsIntersectionObserver) { + return; + } - const settings = this._settings; - const observerSettings = { - root: settings.container === document ? null : settings.container, - rootMargin: settings.threshold + "px" - }; - const revealIntersectingElements = (entries) => { - entries.forEach(entry => { - if (isIntersecting(entry)) { - let element = entry.target; - revealElement(element, this._settings); - this._observer.unobserve(element); - } - }); - this._elements = purgeElements(this._elements); - }; - this._observer = new IntersectionObserver(revealIntersectingElements, observerSettings); - }, - - loadAll: function() { - const settings = this._settings; - // Fallback: load all elements at once - this._elements.forEach(element => { - revealElement(element, settings); - }); - this._elements = purgeElements(this._elements); - }, - - update: function (elements) { - const settings = this._settings; - const nodeSet = elements || settings.container.querySelectorAll(settings.elements_selector); - - this._elements = purgeElements(Array.prototype.slice.call(nodeSet)); // nodeset to array for IE compatibility - if (this._observer) { - this._elements.forEach(element => { - this._observer.observe(element); - }); - return; - } - this.loadAll(); - }, - - destroy: function () { - if (this._observer) { - purgeElements(this._elements).forEach(element => { - this._observer.unobserve(element); - }); - this._observer = null; - } - this._elements = null; - this._settings = null; - } + const settings = this._settings; + const observerSettings = { + root: settings.container === document ? null : settings.container, + rootMargin: settings.threshold + "px" + }; + const revealIntersectingElements = entries => { + entries.forEach(entry => { + if (isIntersecting(entry)) { + let element = entry.target; + revealElement(element, this._settings); + this._observer.unobserve(element); + } + }); + this._elements = purgeElements(this._elements); + }; + this._observer = new IntersectionObserver( + revealIntersectingElements, + observerSettings + ); + }, + + loadAll: function() { + const settings = this._settings; + // Fallback: load all elements at once + this._elements.forEach(element => { + revealElement(element, settings); + }); + this._elements = purgeElements(this._elements); + }, + + update: function(elements) { + const settings = this._settings; + const nodeSet = + elements || + settings.container.querySelectorAll(settings.elements_selector); + + this._elements = purgeElements(Array.prototype.slice.call(nodeSet)); // nodeset to array for IE compatibility + if (this._observer) { + this._elements.forEach(element => { + this._observer.observe(element); + }); + return; + } + this.loadAll(); + }, + + destroy: function() { + if (this._observer) { + purgeElements(this._elements).forEach(element => { + this._observer.unobserve(element); + }); + this._observer = null; + } + this._elements = null; + this._settings = null; + }, + + load: function(element, force) { + revealElement(element, this._settings, force); + } }; /* Automatic instances creation if required (useful for async script loading!) */ let autoInitOptions = window.lazyLoadOptions; if (runningOnBrowser && autoInitOptions) { - autoInitialize(LazyLoad, autoInitOptions); + autoInitialize(LazyLoad, autoInitOptions); } return LazyLoad; diff --git a/dist/lazyload.js b/dist/lazyload.js index 27d3e15e..d82cdb1e 100644 --- a/dist/lazyload.js +++ b/dist/lazyload.js @@ -3,276 +3,294 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument 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(); + (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 getData = function getData(element, attribute) { - return element.getAttribute(dataPrefix + attribute); - }; - - var setData = function setData(element, attribute, value) { - return element.setAttribute(dataPrefix + attribute, value); - }; - - function purgeElements(elements) { - return elements.filter(function (element) { - return !getData(element, "was-processed"); - }); - } - - /* 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); - var tagName = element.tagName; - if (tagName === "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); - return; - } - if (tagName === "IFRAME") { - setAttributeIfNotNullOrEmpty(element, "src", srcDataValue); - return; - } - if (tagName === "VIDEO") { - setSourcesInChildren(element, "src", srcDataName); - setAttributeIfNotNullOrEmpty(element, "src", srcDataValue); - return; - } - if (srcDataValue) { - element.style.backgroundImage = 'url("' + srcDataValue + '")'; - } - }; - - 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); // Calling loaded or error callback - }; - - function revealElement(element, settings) { - callCallback(settings.callback_enter, element); - if (["IMG", "IFRAME", "VIDEO"].indexOf(element.tagName) > -1) { - addOneShotListeners(element, settings); - addClass(element, settings.class_loading); - } - setSources(element, settings); - setData(element, "was-processed", true); - 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 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 settings = this._settings; - var observerSettings = { - root: settings.container === document ? null : settings.container, - rootMargin: settings.threshold + "px" - }; - var revealIntersectingElements = function revealIntersectingElements(entries) { - entries.forEach(function (entry) { - if (isIntersecting(entry)) { - var element = entry.target; - revealElement(element, _this._settings); - _this._observer.unobserve(element); - } - }); - _this._elements = purgeElements(_this._elements); - }; - this._observer = new IntersectionObserver(revealIntersectingElements, observerSettings); - }, - - loadAll: function loadAll() { - var settings = this._settings; - // Fallback: load all elements at once - this._elements.forEach(function (element) { - revealElement(element, settings); - }); - this._elements = purgeElements(this._elements); - }, - - update: function update(elements) { - var _this2 = 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 (this._observer) { - this._elements.forEach(function (element) { - _this2._observer.observe(element); - }); - return; - } - this.loadAll(); - }, - - destroy: function destroy() { - var _this3 = this; - - if (this._observer) { - purgeElements(this._elements).forEach(function (element) { - _this3._observer.unobserve(element); - }); - this._observer = null; - } - this._elements = null; - this._settings = null; - } - }; - - /* Automatic instances creation if required (useful for async script loading!) */ - var autoInitOptions = window.lazyLoadOptions; - if (runningOnBrowser && autoInitOptions) { - autoInitialize(LazyLoad, autoInitOptions); - } - - return LazyLoad; + '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 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 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 settings = this._settings; + var observerSettings = { + root: settings.container === document ? null : settings.container, + rootMargin: settings.threshold + "px" + }; + var revealIntersectingElements = function revealIntersectingElements(entries) { + entries.forEach(function (entry) { + if (isIntersecting(entry)) { + var element = entry.target; + revealElement(element, _this._settings); + _this._observer.unobserve(element); + } + }); + _this._elements = purgeElements(_this._elements); + }; + this._observer = new IntersectionObserver(revealIntersectingElements, observerSettings); + }, + + loadAll: function loadAll() { + var settings = this._settings; + // Fallback: load all elements at once + this._elements.forEach(function (element) { + revealElement(element, settings); + }); + this._elements = purgeElements(this._elements); + }, + + update: function update(elements) { + var _this2 = 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 (this._observer) { + this._elements.forEach(function (element) { + _this2._observer.observe(element); + }); + return; + } + this.loadAll(); + }, + + destroy: function destroy() { + var _this3 = this; + + if (this._observer) { + purgeElements(this._elements).forEach(function (element) { + _this3._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 diff --git a/dist/lazyload.min.js b/dist/lazyload.min.js index 6707bd69..a33d8ee6 100644 --- a/dist/lazyload.min.js +++ b/dist/lazyload.min.js @@ -1 +1 @@ -var _extends=Object.assign||function(e){for(var t=1;t { return element.getAttribute(dataPrefix + attribute); @@ -7,3 +9,9 @@ export const getData = (element, attribute) => { export const setData = (element, attribute, value) => { return element.setAttribute(dataPrefix + attribute, value); }; + +export const setWasProcessed = element => + setData(element, processedDataName, processedDataValue); + +export const getWasProcessed = element => + getData(element, processedDataName) === processedDataValue; diff --git a/src/lazyload.js b/src/lazyload.js index a644da50..64147b6b 100644 --- a/src/lazyload.js +++ b/src/lazyload.js @@ -77,8 +77,8 @@ LazyLoad.prototype = { this._settings = null; }, - load: function(element) { - revealElement(element, this._settings); + load: function(element, force) { + revealElement(element, this._settings, force); } }; diff --git a/src/lazyload.purge.js b/src/lazyload.purge.js index bd46fb74..0f3cb3b4 100644 --- a/src/lazyload.purge.js +++ b/src/lazyload.purge.js @@ -1,7 +1,5 @@ -import { getData } from "./lazyload.data"; +import { getWasProcessed } from "./lazyload.data"; export default function(elements) { - return elements.filter(element => { - return !getData(element, "was-processed"); - }); + return elements.filter(element => !getWasProcessed(element)); } diff --git a/src/lazyload.reveal.js b/src/lazyload.reveal.js index 33a780e7..e4bab49a 100644 --- a/src/lazyload.reveal.js +++ b/src/lazyload.reveal.js @@ -1,5 +1,5 @@ import { setSources } from "./lazyload.setSources"; -import { setData } from "./lazyload.data"; +import { getWasProcessed, setWasProcessed } from "./lazyload.data"; import { addClass, removeClass } from "./lazyload.class"; const callCallback = function(callback, argument) { @@ -36,16 +36,19 @@ const onEvent = function(event, success, settings) { callCallback( success ? settings.callback_load : settings.callback_error, element - ); // Calling loaded or error callback + ); }; -export default function(element, settings) { +export default function(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); - setData(element, "was-processed", true); + setWasProcessed(element); callCallback(settings.callback_set, element); } From 06b4452c4d4feed5ac27bd237f70d894b5eddb1e Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi Date: Thu, 19 Jul 2018 23:32:49 +0200 Subject: [PATCH 12/19] Version +0.1.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 3b179508..fa82cb4f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vanilla-lazyload", - "version": "10.9.0", + "version": "10.10.0", "description": "A fast, lightweight script to load images as they enter the viewport. SEO friendly, it supports responsive images (both srcset + sizes and picture) and progressive JPEG", "main": "dist/lazyload.min.js", "devDependencies": { From 6933425bf16921d4b01bd7639e83461f0c15b5f4 Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi Date: Fri, 20 Jul 2018 11:52:56 +0200 Subject: [PATCH 13/19] Calling `this.load` instead of `revealElement` --- dist/lazyload.es2015.js | 8 +++----- dist/lazyload.js | 18 +++++++++--------- dist/lazyload.min.js | 2 +- src/lazyload.js | 8 +++----- 4 files changed, 16 insertions(+), 20 deletions(-) diff --git a/dist/lazyload.es2015.js b/dist/lazyload.es2015.js index aa5e197c..7eb3d6ba 100644 --- a/dist/lazyload.es2015.js +++ b/dist/lazyload.es2015.js @@ -225,7 +225,6 @@ LazyLoad.prototype = { return; } - const settings = this._settings; const observerSettings = { root: settings.container === document ? null : settings.container, rootMargin: settings.threshold + "px" @@ -234,7 +233,7 @@ LazyLoad.prototype = { entries.forEach(entry => { if (isIntersecting(entry)) { let element = entry.target; - revealElement(element, this._settings); + this.load(element); this._observer.unobserve(element); } }); @@ -247,10 +246,8 @@ LazyLoad.prototype = { }, loadAll: function() { - const settings = this._settings; - // Fallback: load all elements at once this._elements.forEach(element => { - revealElement(element, settings); + this.load(element); }); this._elements = purgeElements(this._elements); }, @@ -268,6 +265,7 @@ LazyLoad.prototype = { }); return; } + // Fallback: load all elements at once this.loadAll(); }, diff --git a/dist/lazyload.js b/dist/lazyload.js index d82cdb1e..83b3b3c3 100644 --- a/dist/lazyload.js +++ b/dist/lazyload.js @@ -225,7 +225,6 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol return; } - var settings = this._settings; var observerSettings = { root: settings.container === document ? null : settings.container, rootMargin: settings.threshold + "px" @@ -234,7 +233,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol entries.forEach(function (entry) { if (isIntersecting(entry)) { var element = entry.target; - revealElement(element, _this._settings); + _this.load(element); _this._observer.unobserve(element); } }); @@ -244,16 +243,16 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol }, loadAll: function loadAll() { - var settings = this._settings; - // Fallback: load all elements at once + var _this2 = this; + this._elements.forEach(function (element) { - revealElement(element, settings); + _this2.load(element); }); this._elements = purgeElements(this._elements); }, update: function update(elements) { - var _this2 = this; + var _this3 = this; var settings = this._settings; var nodeSet = elements || settings.container.querySelectorAll(settings.elements_selector); @@ -261,19 +260,20 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol this._elements = purgeElements(Array.prototype.slice.call(nodeSet)); // nodeset to array for IE compatibility if (this._observer) { this._elements.forEach(function (element) { - _this2._observer.observe(element); + _this3._observer.observe(element); }); return; } + // Fallback: load all elements at once this.loadAll(); }, destroy: function destroy() { - var _this3 = this; + var _this4 = this; if (this._observer) { purgeElements(this._elements).forEach(function (element) { - _this3._observer.unobserve(element); + _this4._observer.unobserve(element); }); this._observer = null; } diff --git a/dist/lazyload.min.js b/dist/lazyload.min.js index a33d8ee6..09ad112a 100644 --- a/dist/lazyload.min.js +++ b/dist/lazyload.min.js @@ -1 +1 @@ -var _extends=Object.assign||function(e){for(var t=1;t { if (isIntersecting(entry)) { let element = entry.target; - revealElement(element, this._settings); + this.load(element); this._observer.unobserve(element); } }); @@ -42,10 +41,8 @@ LazyLoad.prototype = { }, loadAll: function() { - const settings = this._settings; - // Fallback: load all elements at once this._elements.forEach(element => { - revealElement(element, settings); + this.load(element); }); this._elements = purgeElements(this._elements); }, @@ -63,6 +60,7 @@ LazyLoad.prototype = { }); return; } + // Fallback: load all elements at once this.loadAll(); }, From 4e91007cf8a24392132f13ab4fd90e3272e032f7 Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi Date: Fri, 20 Jul 2018 12:01:11 +0200 Subject: [PATCH 14/19] Moved creation of observersettings to a function --- dist/lazyload.es2015.js | 15 ++++++++------- dist/lazyload.js | 14 ++++++++------ dist/lazyload.min.js | 2 +- src/lazyload.intersectionObserver.js | 8 +++++++- src/lazyload.js | 12 +++++------- 5 files changed, 29 insertions(+), 22 deletions(-) diff --git a/dist/lazyload.es2015.js b/dist/lazyload.es2015.js index 7eb3d6ba..b35fcaf4 100644 --- a/dist/lazyload.es2015.js +++ b/dist/lazyload.es2015.js @@ -211,7 +211,13 @@ function revealElement(element, settings, force) { /* 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 */ -const isIntersecting = (element) => element.isIntersecting || element.intersectionRatio > 0; +const isIntersecting = element => + element.isIntersecting || element.intersectionRatio > 0; + +const getObserverSettings = settings => ({ + root: settings.container === document ? null : settings.container, + rootMargin: settings.threshold + "px" +}); const LazyLoad = function(customSettings, elements) { this._settings = getInstanceSettings(customSettings); @@ -224,11 +230,6 @@ LazyLoad.prototype = { if (!supportsIntersectionObserver) { return; } - - const observerSettings = { - root: settings.container === document ? null : settings.container, - rootMargin: settings.threshold + "px" - }; const revealIntersectingElements = entries => { entries.forEach(entry => { if (isIntersecting(entry)) { @@ -241,7 +242,7 @@ LazyLoad.prototype = { }; this._observer = new IntersectionObserver( revealIntersectingElements, - observerSettings + getObserverSettings(this._settings) ); }, diff --git a/dist/lazyload.js b/dist/lazyload.js index 83b3b3c3..5617f391 100644 --- a/dist/lazyload.js +++ b/dist/lazyload.js @@ -211,6 +211,13 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol 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(); @@ -224,11 +231,6 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol if (!supportsIntersectionObserver) { return; } - - var observerSettings = { - root: settings.container === document ? null : settings.container, - rootMargin: settings.threshold + "px" - }; var revealIntersectingElements = function revealIntersectingElements(entries) { entries.forEach(function (entry) { if (isIntersecting(entry)) { @@ -239,7 +241,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol }); _this._elements = purgeElements(_this._elements); }; - this._observer = new IntersectionObserver(revealIntersectingElements, observerSettings); + this._observer = new IntersectionObserver(revealIntersectingElements, getObserverSettings(this._settings)); }, loadAll: function loadAll() { diff --git a/dist/lazyload.min.js b/dist/lazyload.min.js index 09ad112a..7ea9c50d 100644 --- a/dist/lazyload.min.js +++ b/dist/lazyload.min.js @@ -1 +1 @@ -var _extends=Object.assign||function(e){for(var t=1;t element.isIntersecting || element.intersectionRatio > 0; \ No newline at end of file +export const isIntersecting = element => + element.isIntersecting || element.intersectionRatio > 0; + +export const getObserverSettings = settings => ({ + root: settings.container === document ? null : settings.container, + rootMargin: settings.threshold + "px" +}); diff --git a/src/lazyload.js b/src/lazyload.js index f7ca4c48..87998ec9 100644 --- a/src/lazyload.js +++ b/src/lazyload.js @@ -2,7 +2,10 @@ import getInstanceSettings from "./lazyload.defaults"; import purgeElements from "./lazyload.purge"; import autoInitialize from "./lazyload.autoInitialize"; import revealElement from "./lazyload.reveal"; -import { isIntersecting } from "./lazyload.intersectionObserver"; +import { + isIntersecting, + getObserverSettings +} from "./lazyload.intersectionObserver"; import { runningOnBrowser, supportsIntersectionObserver @@ -19,11 +22,6 @@ LazyLoad.prototype = { if (!supportsIntersectionObserver) { return; } - - const observerSettings = { - root: settings.container === document ? null : settings.container, - rootMargin: settings.threshold + "px" - }; const revealIntersectingElements = entries => { entries.forEach(entry => { if (isIntersecting(entry)) { @@ -36,7 +34,7 @@ LazyLoad.prototype = { }; this._observer = new IntersectionObserver( revealIntersectingElements, - observerSettings + getObserverSettings(this._settings) ); }, From ffe44d62dbd7e85f074cbdb0de83da8e50f23429 Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi Date: Fri, 20 Jul 2018 12:19:04 +0200 Subject: [PATCH 15/19] Unified callbacks' and callback_picture's callbacks --- demos/callbacks.html | 397 +++++++++++------- demos/callbacks_picture.html | 793 ++++++++++++++++++----------------- 2 files changed, 644 insertions(+), 546 deletions(-) diff --git a/demos/callbacks.html b/demos/callbacks.html index 4730c05c..fea91eef 100644 --- a/demos/callbacks.html +++ b/demos/callbacks.html @@ -1,5 +1,6 @@ + @@ -9,13 +10,17 @@ body { font-family: sans-serif; } + .intro { margin: 1em 0; } + p { margin: .3em 0; } - ul, li { + + ul, + li { list-style-type: none; margin: 0; padding: 0; @@ -25,167 +30,249 @@ display: block; border: 0; } + img:not([src]) { visibility: hidden; } </style> </head> + <body> -<div id="results1" class="results"> - <div class="intro"> - <p>To see callbacks being logged, <strong>open your browser's console</strong>.</p> - <p>In case of error, the image is set to a fallback image generated by <a href="http://placehold.it">placehold.it</a></p> + <div id="results1" class="results"> + <div class="intro"> + <p>To see callbacks being logged, + <strong>open your browser's console</strong>.</p> + <p>In case of error, the image is set to a fallback image generated by + <a href="http://placehold.it">placehold.it</a> + </p> + </div> + <ul> + <li> + <a href="#/it/donna/stivaletti_cod44721746jj.html"> + <img alt="Stivaletti" data-src="../img/44721746JJ_15_a.jpg" width="220" height="280"> + </a> + </li> + <li> + <a href="#/it/donna/open-toe_cod44740806jx.html"> + <img alt="Open toe" data-src="../img/44740806JX_15_r.jpg" width="220" height="280"> + </a> + </li> + <li> + <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html"> + <img alt="Sneakers & Tennis" data-src="../img/error.jpg" width="220" height="280"> + </a> + </li> + <li> + <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html"> + <img alt="Sneakers & Tennis shoes basse" data-src="../img/44738717AM_15_a.jpg" width="220" height="280"> + </a> + </li> + <li> + <a href="#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html"> + <img alt="Sneakers & Tennis shoes alte" data-src="../img/44739940CB_15_a.jpg" width="220" height="280"> + </a> + </li> + <li> + <a href="#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html"> + <img alt="Sneakers & Tennis shoes alte" data-src="../img/44740860XG_15_a.jpg" width="220" height="280"> + </a> + </li> + <li> + <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html"> + <img alt="Sneakers & Tennis shoes basse" data-src="../img/44738719VN_15_a.jpg" width="220" height="280"> + </a> + </li> + <li> + <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html"> + <img alt="Sneakers & Tennis shoes basse" data-src="../img/44739938WK_15_a.jpg" width="220" height="280"> + </a> + </li> + <li> + <a href="#/it/donna/stivali_cod44736534fq.html"> + <img alt="Stivali" data-src="../img/44736534FQ_15_a.jpg" width="220" height="280"> + </a> + </li> + <li> + <a href="#/it/donna/stivali_cod44735388ui.html"> + <img alt="Stivali" data-src="../img/44735388UI_15_a.jpg" width="220" height="280"> + </a> + </li> + <li> + <a href="#/it/donna/stivaletti_cod44739165ev.html"> + <img alt="Stivaletti" data-src="../img/44739165EV_15_a.jpg" width="220" height="280"> + </a> + </li> + <li> + <a href="#/it/donna/stivaletti_cod44739454hf.html"> + <img alt="Stivaletti" data-src="../img/44739454HF_15_a.jpg" width="220" height="280"> + </a> + </li> + <li> + <a href="#/it/donna/stivali_cod44719480km.html"> + <img alt="Stivali" data-src="../img/44719480KM_15_a.jpg" width="220" height="280"> + </a> + </li> + <li> + <a href="#/it/donna/stivaletti_cod44719687td.html"> + <img alt="Stivaletti" data-src="../img/44719687TD_15_a.jpg" width="220" height="280"> + </a> + </li> + <li> + <a href="#/it/donna/decollete_cod44721899ng.html"> + <img alt="Décolleté" data-src="../img/44721899NG_15_a.jpg" width="220" height="280"> + </a> + </li> + <li> + <a href="#/it/donna/mocassini_cod44721744sl.html"> + <img alt="Mocassini" data-src="../img/44721744SL_15_a.jpg" width="220" height="280"> + </a> + </li> + <li> + <a href="#/it/donna/stivaletti_cod44716730kr.html"> + <img alt="Stivaletti" data-src="../img/44716730KR_15_a.jpg" width="220" height="280"> + </a> + </li> + <li> + <a href="#/it/donna/decollete_cod44718734xl.html"> + <img alt="Décolleté" data-src="../img/44718734XL_15_a.jpg" width="220" height="280"> + </a> + </li> + <li> + <a href="#/it/donna/decollete_cod44721796uk.html"> + <img alt="Décolleté" data-src="../img/44721796UK_15_a.jpg" width="220" height="280"> + </a> + </li> + <li> + <a href="#/it/donna/francesine_cod44717679mj.html"> + <img alt="Francesine" data-src="../img/44717679MJ_15_a.jpg" width="220" height="280"> + </a> + </li> + <li> + <a href="#/it/donna/stivaletti_cod44724594vu.html"> + <img alt="Stivaletti" data-src="../img/44724594VU_15_a.jpg" width="220" height="280"> + </a> + </li> + <li> + <a href="#/it/donna/decollete_cod44726148aq.html"> + <img alt="Décolleté" data-src="../img/44726148AQ_15_a.jpg" width="220" height="280"> + </a> + </li> + <li> + <a href="#/it/donna/mocassini_cod44719629nt.html"> + <img alt="Mocassini" data-src="../img/44719629NT_15_a.jpg" width="220" height="280"> + </a> + </li> + <li> + <a href="#/it/donna/mocassini_cod44725329kq.html"> + <img alt="Mocassini" data-src="../img/44725329KQ_15_a.jpg" width="220" height="280"> + </a> + </li> + <li> + <a href="#/it/donna/stivali_cod44724026qs.html"> + <img alt="Stivali" data-src="../img/44724026QS_15_a.jpg" width="220" height="280"> + </a> + </li> + <li> + <a href="#/it/donna/stivaletti_cod44720256gw.html"> + <img alt="Stivaletti" data-src="../img/44720256GW_15_a.jpg" width="220" height="280"> + </a> + </li> + <li> + <a href="#/it/donna/stivaletti_cod44722062id.html"> + <img alt="Stivaletti" data-src="../img/44722062ID_15_a.jpg" width="220" height="280"> + </a> + </li> + <li> + <a href="#/it/donna/mocassini_cod44722402rh.html"> + <img alt="Mocassini" data-src="../img/44722402RH_15_a.jpg" width="220" height="280"> + </a> + </li> + <li> + <a href="#/it/donna/stivaletti_cod44726296vu.html"> + <img alt="Stivaletti" data-src="../img/44726296VU_15_a.jpg" width="220" height="280"> + </a> + </li> + <li> + <a href="#/it/donna/stivaletti_cod44725755ct.html"> + <img alt="Stivaletti" data-src="../img/44725755CT_15_a.jpg" width="220" height="280"> + </a> + </li> + <li> + <a href="#/it/donna/stivaletti_cod44725348nv.html"> + <img alt="Stivaletti" data-src="../img/error.jpg" width="220" height="280"> + </a> + </li> + <li> + <a href="#/it/donna/stivaletti_cod44721879xx.html"> + <img alt="Stivaletti" data-src="../img/44721879XX_15_a.jpg" width="220" height="280"> + </a> + </li> + <li> + <a href="#/it/donna/cuissardes_cod44729472iq.html"> + <img alt="Cuissardes" data-src="../img/44729472IQ_15_a.jpg" width="220" height="280"> + </a> + </li> + <li> + <a href="#/it/donna/decollete_cod44725388jv.html"> + <img alt="Décolleté" data-src="../img/44725388JV_15_a.jpg" width="220" height="280"> + </a> + </li> + <li> + <a href="#/it/donna/stivaletti_cod44721854ce.html"> + <img alt="Stivaletti" data-src="../img/44721854CE_15_a.jpg" width="220" height="280"> + </a> + </li> + <li> + <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html"> + <img alt="Sneakers & Tennis shoes basse" data-src="../img/44727690JP_15_a.jpg" width="220" height="280"> + </a> + </li> + <li> + <a href="#/it/donna/mocassini_cod44727501hh.html"> + <img alt="Mocassini" data-src="../img/44727501HH_15_a.jpg" width="220" height="280"> + </a> + </li> + <li> + <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html"> + <img alt="Sneakers & Tennis shoes basse" data-src="../img/44727038AQ_15_a.jpg" width="220" height="280"> + </a> + </li> + <li> + <a href="#/it/donna/mocassini_cod44704882bq.html"> + <img alt="Mocassini" data-src="../img/44704882BQ_15_a.jpg" width="220" height="280"> + </a> + </li> + <li> + <a href="#/it/donna/mocassini_cod44734002vc.html"> + <img alt="Mocassini" data-src="../img/error.jpg" width="220" height="280"> + </a> + </li> + </ul> </div> - <ul> - <li> - <a href="#/it/donna/stivaletti_cod44721746jj.html"><img alt="Stivaletti" data-src="../img/44721746JJ_15_a.jpg" width="220" height="280"></a> - </li> - <li> - <a href="#/it/donna/open-toe_cod44740806jx.html"><img alt="Open toe" data-src="../img/44740806JX_15_r.jpg" width="220" height="280"></a> - </li> - <li> - <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html"><img alt="Sneakers & Tennis" data-src="../img/error.jpg" width="220" height="280"></a> - </li> - <li> - <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html"><img alt="Sneakers & Tennis shoes basse" data-src="../img/44738717AM_15_a.jpg" width="220" height="280"></a> - </li> - <li> - <a href="#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html"><img alt="Sneakers & Tennis shoes alte" data-src="../img/44739940CB_15_a.jpg" width="220" height="280"></a> - </li> - <li> - <a href="#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html"><img alt="Sneakers & Tennis shoes alte" data-src="../img/44740860XG_15_a.jpg" width="220" height="280"></a> - </li> - <li> - <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html"><img alt="Sneakers & Tennis shoes basse" data-src="../img/44738719VN_15_a.jpg" width="220" height="280"></a> - </li> - <li> - <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html"><img alt="Sneakers & Tennis shoes basse" data-src="../img/44739938WK_15_a.jpg" width="220" height="280"></a> - </li> - <li> - <a href="#/it/donna/stivali_cod44736534fq.html"><img alt="Stivali" data-src="../img/44736534FQ_15_a.jpg" width="220" height="280"></a> - </li> - <li> - <a href="#/it/donna/stivali_cod44735388ui.html"><img alt="Stivali" data-src="../img/44735388UI_15_a.jpg" width="220" height="280"></a> - </li> - <li> - <a href="#/it/donna/stivaletti_cod44739165ev.html"><img alt="Stivaletti" data-src="../img/44739165EV_15_a.jpg" width="220" height="280"></a> - </li> - <li> - <a href="#/it/donna/stivaletti_cod44739454hf.html"><img alt="Stivaletti" data-src="../img/44739454HF_15_a.jpg" width="220" height="280"></a> - </li> - <li> - <a href="#/it/donna/stivali_cod44719480km.html"><img alt="Stivali" data-src="../img/44719480KM_15_a.jpg" width="220" height="280"></a> - </li> - <li> - <a href="#/it/donna/stivaletti_cod44719687td.html"><img alt="Stivaletti" data-src="../img/44719687TD_15_a.jpg" width="220" height="280"></a> - </li> - <li> - <a href="#/it/donna/decollete_cod44721899ng.html"><img alt="Décolleté" data-src="../img/44721899NG_15_a.jpg" width="220" height="280"></a> - </li> - <li> - <a href="#/it/donna/mocassini_cod44721744sl.html"><img alt="Mocassini" data-src="../img/44721744SL_15_a.jpg" width="220" height="280"></a> - </li> - <li> - <a href="#/it/donna/stivaletti_cod44716730kr.html"><img alt="Stivaletti" data-src="../img/44716730KR_15_a.jpg" width="220" height="280"></a> - </li> - <li> - <a href="#/it/donna/decollete_cod44718734xl.html"><img alt="Décolleté" data-src="../img/44718734XL_15_a.jpg" width="220" height="280"></a> - </li> - <li> - <a href="#/it/donna/decollete_cod44721796uk.html"><img alt="Décolleté" data-src="../img/44721796UK_15_a.jpg" width="220" height="280"></a> - </li> - <li> - <a href="#/it/donna/francesine_cod44717679mj.html"><img alt="Francesine" data-src="../img/44717679MJ_15_a.jpg" width="220" height="280"></a> - </li> - <li> - <a href="#/it/donna/stivaletti_cod44724594vu.html"><img alt="Stivaletti" data-src="../img/44724594VU_15_a.jpg" width="220" height="280"></a> - </li> - <li> - <a href="#/it/donna/decollete_cod44726148aq.html"><img alt="Décolleté" data-src="../img/44726148AQ_15_a.jpg" width="220" height="280"></a> - </li> - <li> - <a href="#/it/donna/mocassini_cod44719629nt.html"><img alt="Mocassini" data-src="../img/44719629NT_15_a.jpg" width="220" height="280"></a> - </li> - <li> - <a href="#/it/donna/mocassini_cod44725329kq.html"><img alt="Mocassini" data-src="../img/44725329KQ_15_a.jpg" width="220" height="280"></a> - </li> - <li> - <a href="#/it/donna/stivali_cod44724026qs.html"><img alt="Stivali" data-src="../img/44724026QS_15_a.jpg" width="220" height="280"></a> - </li> - <li> - <a href="#/it/donna/stivaletti_cod44720256gw.html"><img alt="Stivaletti" data-src="../img/44720256GW_15_a.jpg" width="220" height="280"></a> - </li> - <li> - <a href="#/it/donna/stivaletti_cod44722062id.html"><img alt="Stivaletti" data-src="../img/44722062ID_15_a.jpg" width="220" height="280"></a> - </li> - <li> - <a href="#/it/donna/mocassini_cod44722402rh.html"><img alt="Mocassini" data-src="../img/44722402RH_15_a.jpg" width="220" height="280"></a> - </li> - <li> - <a href="#/it/donna/stivaletti_cod44726296vu.html"><img alt="Stivaletti" data-src="../img/44726296VU_15_a.jpg" width="220" height="280"></a> - </li> - <li> - <a href="#/it/donna/stivaletti_cod44725755ct.html"><img alt="Stivaletti" data-src="../img/44725755CT_15_a.jpg" width="220" height="280"></a> - </li> - <li> - <a href="#/it/donna/stivaletti_cod44725348nv.html"><img alt="Stivaletti" data-src="../img/error.jpg" width="220" height="280"></a> - </li> - <li> - <a href="#/it/donna/stivaletti_cod44721879xx.html"><img alt="Stivaletti" data-src="../img/44721879XX_15_a.jpg" width="220" height="280"></a> - </li> - <li> - <a href="#/it/donna/cuissardes_cod44729472iq.html"><img alt="Cuissardes" data-src="../img/44729472IQ_15_a.jpg" width="220" height="280"></a> - </li> - <li> - <a href="#/it/donna/decollete_cod44725388jv.html"><img alt="Décolleté" data-src="../img/44725388JV_15_a.jpg" width="220" height="280"></a> - </li> - <li> - <a href="#/it/donna/stivaletti_cod44721854ce.html"><img alt="Stivaletti" data-src="../img/44721854CE_15_a.jpg" width="220" height="280"></a> - </li> - <li> - <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html"><img alt="Sneakers & Tennis shoes basse" data-src="../img/44727690JP_15_a.jpg" width="220" height="280"></a> - </li> - <li> - <a href="#/it/donna/mocassini_cod44727501hh.html"><img alt="Mocassini" data-src="../img/44727501HH_15_a.jpg" width="220" height="280"></a> - </li> - <li> - <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html"><img alt="Sneakers & Tennis shoes basse" data-src="../img/44727038AQ_15_a.jpg" width="220" height="280"></a> - </li> - <li> - <a href="#/it/donna/mocassini_cod44704882bq.html"><img alt="Mocassini" data-src="../img/44704882BQ_15_a.jpg" width="220" height="280"></a> - </li> - <li> - <a href="#/it/donna/mocassini_cod44734002vc.html"><img alt="Mocassini" data-src="../img/error.jpg" width="220" height="280"></a> - </li> - </ul> -</div> -<script src="../dist/lazyload.js"></script> -<script> - (function () { - function logElementEvent(eventName, element) { - console.log(new Date().getTime(), eventName, element.getAttribute('data-src')); - } - - function logEvent(eventName, elementsLeft) { - console.log(new Date().getTime(), eventName, elementsLeft + " images left"); - } - - ll = new LazyLoad({ - callback_enter: function (element) { - logElementEvent("ENTERED", element); - }, - callback_load: function (element) { - logElementEvent("LOADED", element); - }, - callback_set: function (element) { - logElementEvent("SET", element); - }, - callback_error: function(element) { - logElementEvent("ERROR", element); - element.src = "https://placeholdit.imgix.net/~text?txtsize=21&txt=Fallback%20image&w=220&h=280"; + <script src="../dist/lazyload.js"></script> + <script> + (function () { + function logElementEvent(eventName, element) { + console.log(Date.now(), eventName, element.getAttribute('data-src')); } - }); - }()); -</script> + + ll = new LazyLoad({ + callback_enter: function (element) { + logElementEvent("ENTERED", element); + }, + callback_load: function (element) { + logElementEvent("LOADED", element); + }, + callback_set: function (element) { + logElementEvent("SET", element); + }, + callback_error: function (element) { + logElementEvent("ERROR", element); + element.src = "https://placeholdit.imgix.net/~text?txtsize=21&txt=Fallback%20image&w=220&h=280"; + } + }); + }()); + </script> </body> + </html> \ No newline at end of file diff --git a/demos/callbacks_picture.html b/demos/callbacks_picture.html index 1a9a8462..2162fc34 100644 --- a/demos/callbacks_picture.html +++ b/demos/callbacks_picture.html @@ -1,5 +1,6 @@ <!DOCTYPE html> <html> + <head lang="en"> <meta charset="UTF-8"> <title> @@ -9,13 +10,17 @@ body { font-family: sans-serif; } + .intro { margin: 1em 0; } + p { margin: .3em 0; } - ul, li { + + ul, + li { list-style-type: none; min-height: 280px; margin: 0; @@ -26,403 +31,409 @@ display: block; border: 0; } + img:not([src]) { visibility: hidden; } </style> </head> + <body> -<div id="results1" class="results"> - <div class="intro"> - <p>To see callbacks being logged, <strong>open your browser's console</strong>.</p> - <p>In case of error, the image is set to a fallback image generated by <a href="http://placehold.it">placehold.it</a></p> + <div id="results1" class="results"> + <div class="intro"> + <p>To see callbacks being logged, + <strong>open your browser's console</strong>.</p> + <p>In case of error, the image is set to a fallback image generated by + <a href="http://placehold.it">placehold.it</a> + </p> + </div> + <ul> + <li> + <a href="#/it/donna/stivaletti_cod44721746jj.html"> + <picture> + <source media="(min-width: 1024px)" srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> + <source media="(min-width: 500px)" srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> + <img alt="Stivaletti" src="http://placehold.it/220x280"> + </picture> + </a> + </li> + <li> + <a href="#/it/donna/open-toe_cod44740806jx.html"> + <picture> + <source media="(min-width: 1024px)" srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> + <source media="(min-width: 500px)" srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> + <img alt="Open toe" src="http://placehold.it/220x280"> + </picture> + </a> + </li> + <li> + <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html"> + <picture> + <source media="(min-width: 1024px)" srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> + <source media="(min-width: 500px)" srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> + <img alt="Sneakers & Tennis" src="http://placehold.it/220x280"> + </picture> + </a> + </li> + <li> + <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html"> + <picture> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> + <img class="lazy" alt="Sneakers & Tennis shoes basse" data-src="http://placehold.it/220x280"> + </picture> + </a> + </li> + <li> + <a href="#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html"> + <picture> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> + <img class="lazy" alt="Sneakers & Tennis shoes alte" data-src="http://placehold.it/220x280"> + </picture> + </a> + </li> + <li> + <a href="#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html"> + <picture> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> + <img class="lazy" alt="Sneakers & Tennis shoes alte" data-src="http://placehold.it/220x280"> + </picture> + </a> + </li> + <li> + <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html"> + <picture> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> + <img class="lazy" alt="Sneakers & Tennis shoes basse" data-src="http://placehold.it/220x280"> + </picture> + </a> + </li> + <li> + <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html"> + <picture> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> + <img class="lazy" alt="Sneakers & Tennis shoes basse" data-src="http://placehold.it/220x280"> + </picture> + </a> + </li> + <li> + <a href="#/it/donna/stivali_cod44736534fq.html"> + <picture> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> + <img class="lazy" alt="Stivali" data-src="http://placehold.it/220x280"> + </picture> + </a> + </li> + <li> + <a href="#/it/donna/stivali_cod44735388ui.html"> + <picture> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> + <img class="lazy" alt="Stivali" data-src="http://placehold.it/220x280"> + </picture> + </a> + </li> + <li> + <a href="#/it/donna/stivaletti_cod44739165ev.html"> + <picture> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> + <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280"> + </picture> + </a> + </li> + <li> + <a href="#/it/donna/stivaletti_cod44739454hf.html"> + <picture> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> + <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280"> + </picture> + </a> + </li> + <li> + <a href="#/it/donna/stivali_cod44719480km.html"> + <picture> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> + <img class="lazy" alt="Stivali" data-src="http://placehold.it/220x280"> + </picture> + </a> + </li> + <li> + <a href="#/it/donna/stivaletti_cod44719687td.html"> + <picture> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> + <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280"> + </picture> + </a> + </li> + <li> + <a href="#/it/donna/decollete_cod44721899ng.html"> + <picture> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> + <img class="lazy" alt="Décolleté" data-src="http://placehold.it/220x280"> + </picture> + </a> + </li> + <li> + <a href="#/it/donna/mocassini_cod44721744sl.html"> + <picture> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> + <img class="lazy" alt="Mocassini" data-src="http://placehold.it/220x280"> + </picture> + </a> + </li> + <li> + <a href="#/it/donna/stivaletti_cod44716730kr.html"> + <picture> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> + <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280"> + </picture> + </a> + </li> + <li> + <a href="#/it/donna/decollete_cod44718734xl.html"> + <picture> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> + <img class="lazy" alt="Décolleté" data-src="http://placehold.it/220x280"> + </picture> + </a> + </li> + <li> + <a href="#/it/donna/decollete_cod44721796uk.html"> + <picture> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> + <img class="lazy" alt="Décolleté" data-src="http://placehold.it/220x280"> + </picture> + </a> + </li> + <li> + <a href="#/it/donna/francesine_cod44717679mj.html"> + <picture> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> + <img class="lazy" alt="Francesine" data-src="http://placehold.it/220x280"> + </picture> + </a> + </li> + <li> + <a href="#/it/donna/stivaletti_cod44724594vu.html"> + <picture> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> + <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280"> + </picture> + </a> + </li> + <li> + <a href="#/it/donna/decollete_cod44726148aq.html"> + <picture> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> + <img class="lazy" alt="Décolleté" data-src="http://placehold.it/220x280"> + </picture> + </a> + </li> + <li> + <a href="#/it/donna/mocassini_cod44719629nt.html"> + <picture> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> + <img class="lazy" alt="Mocassini" data-src="http://placehold.it/220x280"> + </picture> + </a> + </li> + <li> + <a href="#/it/donna/mocassini_cod44725329kq.html"> + <picture> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> + <img class="lazy" alt="Mocassini" data-src="http://placehold.it/220x280"> + </picture> + </a> + </li> + <li> + <a href="#/it/donna/stivali_cod44724026qs.html"> + <picture> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> + <img class="lazy" alt="Stivali" data-src="http://placehold.it/220x280"> + </picture> + </a> + </li> + <li> + <a href="#/it/donna/stivaletti_cod44720256gw.html"> + <picture> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> + <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280"> + </picture> + </a> + </li> + <li> + <a href="#/it/donna/stivaletti_cod44722062id.html"> + <picture> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> + <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280"> + </picture> + </a> + </li> + <li> + <a href="#/it/donna/mocassini_cod44722402rh.html"> + <picture> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> + <img class="lazy" alt="Mocassini" data-src="http://placehold.it/220x280"> + </picture> + </a> + </li> + <li> + <a href="#/it/donna/stivaletti_cod44726296vu.html"> + <picture> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> + <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280"> + </picture> + </a> + </li> + <li> + <a href="#/it/donna/stivaletti_cod44725755ct.html"> + <picture> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> + <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280"> + </picture> + </a> + </li> + <li> + <a href="#/it/donna/stivaletti_cod44725348nv.html"> + <picture> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> + <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280"> + </picture> + </a> + </li> + <li> + <a href="#/it/donna/stivaletti_cod44721879xx.html"> + <picture> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> + <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280"> + </picture> + </a> + </li> + <li> + <a href="#/it/donna/cuissardes_cod44729472iq.html"> + <picture> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> + <img class="lazy" alt="Cuissardes" data-src="http://placehold.it/220x280"> + </picture> + </a> + </li> + <li> + <a href="#/it/donna/decollete_cod44725388jv.html"> + <picture> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> + <img class="lazy" alt="Décolleté" data-src="http://placehold.it/220x280"> + </picture> + </a> + </li> + <li> + <a href="#/it/donna/stivaletti_cod44721854ce.html"> + <picture> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> + <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280"> + </picture> + </a> + </li> + <li> + <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html"> + <picture> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> + <img class="lazy" alt="Sneakers & Tennis shoes basse" data-src="http://placehold.it/220x280"> + </picture> + </a> + </li> + <li> + <a href="#/it/donna/mocassini_cod44727501hh.html"> + <picture> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> + <img class="lazy" alt="Mocassini" data-src="http://placehold.it/220x280"> + </picture> + </a> + </li> + <li> + <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html"> + <picture> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> + <img class="lazy" alt="Sneakers & Tennis shoes basse" data-src="http://placehold.it/220x280"> + </picture> + </a> + </li> + <li> + <a href="#/it/donna/mocassini_cod44704882bq.html"> + <picture> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> + <img class="lazy" alt="Mocassini" data-src="http://placehold.it/220x280"> + </picture> + </a> + </li> + <li> + <a href="#/it/donna/mocassini_cod44734002vc.html"> + <picture> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> + <img class="lazy" alt="Mocassini" data-src="http://placehold.it/220x280"> + </picture> + </a> + </li> + </ul> </div> - <ul> - <li> - <a href="#/it/donna/stivaletti_cod44721746jj.html"> - <picture> - <source media="(min-width: 1024px)" srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img alt="Stivaletti" src="http://placehold.it/220x280"> - </picture> - </a> - </li> - <li> - <a href="#/it/donna/open-toe_cod44740806jx.html"> - <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img alt="Open toe" data-src="http://placehold.it/220x280"> - </picture> - </a> - </li> - <li> - <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html"> - <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img alt="Sneakers & Tennis" data-src="http://placehold.it/220x280"> - </picture> - </a> - </li> - <li> - <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html"> - <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img alt="Sneakers & Tennis shoes basse" data-src="http://placehold.it/220x280"> - </picture> - </a> - </li> - <li> - <a href="#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html"> - <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Sneakers & Tennis shoes alte" data-src="http://placehold.it/220x280"> - </picture> - </a> - </li> - <li> - <a href="#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html"> - <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Sneakers & Tennis shoes alte" data-src="http://placehold.it/220x280"> - </picture> - </a> - </li> - <li> - <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html"> - <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Sneakers & Tennis shoes basse" data-src="http://placehold.it/220x280"> - </picture> - </a> - </li> - <li> - <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html"> - <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Sneakers & Tennis shoes basse" data-src="http://placehold.it/220x280"> - </picture> - </a> - </li> - <li> - <a href="#/it/donna/stivali_cod44736534fq.html"> - <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Stivali" data-src="http://placehold.it/220x280"> - </picture> - </a> - </li> - <li> - <a href="#/it/donna/stivali_cod44735388ui.html"> - <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Stivali" data-src="http://placehold.it/220x280"> - </picture> - </a> - </li> - <li> - <a href="#/it/donna/stivaletti_cod44739165ev.html"> - <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280"> - </picture> - </a> - </li> - <li> - <a href="#/it/donna/stivaletti_cod44739454hf.html"> - <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280"> - </picture> - </a> - </li> - <li> - <a href="#/it/donna/stivali_cod44719480km.html"> - <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Stivali" data-src="http://placehold.it/220x280"> - </picture> - </a> - </li> - <li> - <a href="#/it/donna/stivaletti_cod44719687td.html"> - <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280"> - </picture> - </a> - </li> - <li> - <a href="#/it/donna/decollete_cod44721899ng.html"> - <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Décolleté" data-src="http://placehold.it/220x280"> - </picture> - </a> - </li> - <li> - <a href="#/it/donna/mocassini_cod44721744sl.html"> - <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Mocassini" data-src="http://placehold.it/220x280"> - </picture> - </a> - </li> - <li> - <a href="#/it/donna/stivaletti_cod44716730kr.html"> - <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280"> - </picture> - </a> - </li> - <li> - <a href="#/it/donna/decollete_cod44718734xl.html"> - <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Décolleté" data-src="http://placehold.it/220x280"> - </picture> - </a> - </li> - <li> - <a href="#/it/donna/decollete_cod44721796uk.html"> - <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Décolleté" data-src="http://placehold.it/220x280"> - </picture> - </a> - </li> - <li> - <a href="#/it/donna/francesine_cod44717679mj.html"> - <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Francesine" data-src="http://placehold.it/220x280"> - </picture> - </a> - </li> - <li> - <a href="#/it/donna/stivaletti_cod44724594vu.html"> - <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280"> - </picture> - </a> - </li> - <li> - <a href="#/it/donna/decollete_cod44726148aq.html"> - <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Décolleté" data-src="http://placehold.it/220x280"> - </picture> - </a> - </li> - <li> - <a href="#/it/donna/mocassini_cod44719629nt.html"> - <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Mocassini" data-src="http://placehold.it/220x280"> - </picture> - </a> - </li> - <li> - <a href="#/it/donna/mocassini_cod44725329kq.html"> - <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Mocassini" data-src="http://placehold.it/220x280"> - </picture> - </a> - </li> - <li> - <a href="#/it/donna/stivali_cod44724026qs.html"> - <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Stivali" data-src="http://placehold.it/220x280"> - </picture> - </a> - </li> - <li> - <a href="#/it/donna/stivaletti_cod44720256gw.html"> - <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280"> - </picture> - </a> - </li> - <li> - <a href="#/it/donna/stivaletti_cod44722062id.html"> - <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280"> - </picture> - </a> - </li> - <li> - <a href="#/it/donna/mocassini_cod44722402rh.html"> - <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Mocassini" data-src="http://placehold.it/220x280"> - </picture> - </a> - </li> - <li> - <a href="#/it/donna/stivaletti_cod44726296vu.html"> - <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280"> - </picture> - </a> - </li> - <li> - <a href="#/it/donna/stivaletti_cod44725755ct.html"> - <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280"> - </picture> - </a> - </li> - <li> - <a href="#/it/donna/stivaletti_cod44725348nv.html"> - <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280"> - </picture> - </a> - </li> - <li> - <a href="#/it/donna/stivaletti_cod44721879xx.html"> - <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280"> - </picture> - </a> - </li> - <li> - <a href="#/it/donna/cuissardes_cod44729472iq.html"> - <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Cuissardes" data-src="http://placehold.it/220x280"> - </picture> - </a> - </li> - <li> - <a href="#/it/donna/decollete_cod44725388jv.html"> - <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Décolleté" data-src="http://placehold.it/220x280"> - </picture> - </a> - </li> - <li> - <a href="#/it/donna/stivaletti_cod44721854ce.html"> - <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280"> - </picture> - </a> - </li> - <li> - <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html"> - <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Sneakers & Tennis shoes basse" data-src="http://placehold.it/220x280"> - </picture> - </a> - </li> - <li> - <a href="#/it/donna/mocassini_cod44727501hh.html"> - <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Mocassini" data-src="http://placehold.it/220x280"> - </picture> - </a> - </li> - <li> - <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html"> - <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Sneakers & Tennis shoes basse" data-src="http://placehold.it/220x280"> - </picture> - </a> - </li> - <li> - <a href="#/it/donna/mocassini_cod44704882bq.html"> - <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Mocassini" data-src="http://placehold.it/220x280"> - </picture> - </a> - </li> - <li> - <a href="#/it/donna/mocassini_cod44734002vc.html"> - <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Mocassini" data-src="http://placehold.it/220x280"> - </picture> - </a> - </li> - </ul> -</div> -<script src="../dist/lazyload.js"></script> -<script> - (function () { - function logElementEvent(eventName, element) { - console.log(Date.now(), eventName, element.getAttribute('data-src')); - } - - ll = new LazyLoad({ - callback_load: function (element) { - logElementEvent("LOADED", element); - }, - callback_set: function (element) { - logElementEvent("SET", element); - }, - callback_processed: function (element) { - logElementEvent("PROCESSED", element); - }, - callback_error: function(element) { - logElementEvent("ERROR", element); - element.src = "https://placeholdit.imgix.net/~text?txtsize=21&txt=Fallback%20image&w=220&h=280"; + <script src="../dist/lazyload.js"></script> + <script> + (function () { + function logElementEvent(eventName, element) { + console.log(Date.now(), eventName, element.getAttribute('data-src')); } - }); - }()); -</script> + + ll = new LazyLoad({ + callback_enter: function (element) { + logElementEvent("ENTERED", element); + }, + callback_load: function (element) { + logElementEvent("LOADED", element); + }, + callback_set: function (element) { + logElementEvent("SET", element); + }, + callback_error: function (element) { + logElementEvent("ERROR", element); + element.src = "https://placeholdit.imgix.net/~text?txtsize=21&txt=Fallback%20image&w=220&h=280"; + } + }); + }()); + </script> </body> + </html> \ No newline at end of file From ce8ccfe9d6ae7bf1573a71c7807d11dd8d7c67c9 Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi <verlicchia@yoox.net> Date: Fri, 20 Jul 2018 12:20:32 +0200 Subject: [PATCH 16/19] Added text to the lazy images --- demos/callbacks_picture.html | 320 ++++++++++++++++++++++------------- 1 file changed, 200 insertions(+), 120 deletions(-) diff --git a/demos/callbacks_picture.html b/demos/callbacks_picture.html index 2162fc34..9db7d525 100644 --- a/demos/callbacks_picture.html +++ b/demos/callbacks_picture.html @@ -51,360 +51,440 @@ <li> <a href="#/it/donna/stivaletti_cod44721746jj.html"> <picture> - <source media="(min-width: 1024px)" srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img alt="Stivaletti" src="http://placehold.it/220x280"> + <source media="(min-width: 1024px)" srcset="http://placehold.it/220x280?text=01 1x, http://placehold.it/440x560?text=01 2x" + /> + <source media="(min-width: 500px)" srcset="http://placehold.it/330x420?text=01 1x, http://placehold.it/660x840?text=01 2x" + /> + <img alt="Stivaletti" src="http://placehold.it/220x280?text=01"> </picture> </a> </li> <li> <a href="#/it/donna/open-toe_cod44740806jx.html"> <picture> - <source media="(min-width: 1024px)" srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img alt="Open toe" src="http://placehold.it/220x280"> + <source media="(min-width: 1024px)" srcset="http://placehold.it/220x280?text=02 1x, http://placehold.it/440x560?text=02 2x" + /> + <source media="(min-width: 500px)" srcset="http://placehold.it/330x420?text=02 1x, http://placehold.it/660x840?text=02 2x" + /> + <img alt="Open toe" src="http://placehold.it/220x280?text=02"> </picture> </a> </li> <li> <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html"> <picture> - <source media="(min-width: 1024px)" srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img alt="Sneakers & Tennis" src="http://placehold.it/220x280"> + <source media="(min-width: 1024px)" srcset="http://placehold.it/220x280?text=03 1x, http://placehold.it/440x560?text=03 2x" + /> + <source media="(min-width: 500px)" srcset="http://placehold.it/330x420?text=03 1x, http://placehold.it/660x840?text=03 2x" + /> + <img alt="Sneakers & Tennis" src="http://placehold.it/220x280?text=03"> </picture> </a> </li> <li> <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html"> <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Sneakers & Tennis shoes basse" data-src="http://placehold.it/220x280"> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280?text=04 1x, http://placehold.it/440x560?text=04 2x" + /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420?text=04 1x, http://placehold.it/660x840?text=04 2x" + /> + <img class="lazy" alt="Sneakers & Tennis shoes basse" data-src="http://placehold.it/220x280?text=04"> </picture> </a> </li> <li> <a href="#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html"> <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Sneakers & Tennis shoes alte" data-src="http://placehold.it/220x280"> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280?text=05 1x, http://placehold.it/440x560?text=05 2x" + /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420?text=05 1x, http://placehold.it/660x840?text=05 2x" + /> + <img class="lazy" alt="Sneakers & Tennis shoes alte" data-src="http://placehold.it/220x280?text=05"> </picture> </a> </li> <li> <a href="#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html"> <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Sneakers & Tennis shoes alte" data-src="http://placehold.it/220x280"> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280?text=06 1x, http://placehold.it/440x560?text=06 2x" + /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420?text=06 1x, http://placehold.it/660x840?text=06 2x" + /> + <img class="lazy" alt="Sneakers & Tennis shoes alte" data-src="http://placehold.it/220x280?text=06"> </picture> </a> </li> <li> <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html"> <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Sneakers & Tennis shoes basse" data-src="http://placehold.it/220x280"> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280?text=07 1x, http://placehold.it/440x560?text=07 2x" + /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420?text=07 1x, http://placehold.it/660x840?text=07 2x" + /> + <img class="lazy" alt="Sneakers & Tennis shoes basse" data-src="http://placehold.it/220x280?text=07"> </picture> </a> </li> <li> <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html"> <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Sneakers & Tennis shoes basse" data-src="http://placehold.it/220x280"> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280?text=08 1x, http://placehold.it/440x560?text=08 2x" + /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420?text=08 1x, http://placehold.it/660x840?text=08 2x" + /> + <img class="lazy" alt="Sneakers & Tennis shoes basse" data-src="http://placehold.it/220x280?text=08"> </picture> </a> </li> <li> <a href="#/it/donna/stivali_cod44736534fq.html"> <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Stivali" data-src="http://placehold.it/220x280"> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280?text=09 1x, http://placehold.it/440x560?text=09 2x" + /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420?text=09 1x, http://placehold.it/660x840?text=09 2x" + /> + <img class="lazy" alt="Stivali" data-src="http://placehold.it/220x280?text=09"> </picture> </a> </li> <li> <a href="#/it/donna/stivali_cod44735388ui.html"> <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Stivali" data-src="http://placehold.it/220x280"> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280?text=10 1x, http://placehold.it/440x560?text=10 2x" + /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420?text=10 1x, http://placehold.it/660x840?text=10 2x" + /> + <img class="lazy" alt="Stivali" data-src="http://placehold.it/220x280?text=10"> </picture> </a> </li> <li> <a href="#/it/donna/stivaletti_cod44739165ev.html"> <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280"> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280?text=11 1x, http://placehold.it/440x560?text=11 2x" + /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420?text=11 1x, http://placehold.it/660x840?text=11 2x" + /> + <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280?text=11"> </picture> </a> </li> <li> <a href="#/it/donna/stivaletti_cod44739454hf.html"> <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280"> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280?text=12 1x, http://placehold.it/440x560?text=12 2x" + /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420?text=12 1x, http://placehold.it/660x840?text=12 2x" + /> + <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280?text=12"> </picture> </a> </li> <li> <a href="#/it/donna/stivali_cod44719480km.html"> <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Stivali" data-src="http://placehold.it/220x280"> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280?text=13 1x, http://placehold.it/440x560?text=13 2x" + /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420?text=13 1x, http://placehold.it/660x840?text=13 2x" + /> + <img class="lazy" alt="Stivali" data-src="http://placehold.it/220x280?text=13"> </picture> </a> </li> <li> <a href="#/it/donna/stivaletti_cod44719687td.html"> <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280"> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280?text=14 1x, http://placehold.it/440x560?text=14 2x" + /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420?text=14 1x, http://placehold.it/660x840?text=14 2x" + /> + <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280?text=14"> </picture> </a> </li> <li> <a href="#/it/donna/decollete_cod44721899ng.html"> <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Décolleté" data-src="http://placehold.it/220x280"> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280?text=15 1x, http://placehold.it/440x560?text=15 2x" + /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420?text=15 1x, http://placehold.it/660x840?text=15 2x" + /> + <img class="lazy" alt="Décolleté" data-src="http://placehold.it/220x280?text=15"> </picture> </a> </li> <li> <a href="#/it/donna/mocassini_cod44721744sl.html"> <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Mocassini" data-src="http://placehold.it/220x280"> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280?text=16 1x, http://placehold.it/440x560?text=16 2x" + /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420?text=16 1x, http://placehold.it/660x840?text=16 2x" + /> + <img class="lazy" alt="Mocassini" data-src="http://placehold.it/220x280?text=16"> </picture> </a> </li> <li> <a href="#/it/donna/stivaletti_cod44716730kr.html"> <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280"> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280?text=17 1x, http://placehold.it/440x560?text=17 2x" + /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420?text=17 1x, http://placehold.it/660x840?text=17 2x" + /> + <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280?text=17"> </picture> </a> </li> <li> <a href="#/it/donna/decollete_cod44718734xl.html"> <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Décolleté" data-src="http://placehold.it/220x280"> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280?text=18 1x, http://placehold.it/440x560?text=18 2x" + /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420?text=18 1x, http://placehold.it/660x840?text=18 2x" + /> + <img class="lazy" alt="Décolleté" data-src="http://placehold.it/220x280?text=18"> </picture> </a> </li> <li> <a href="#/it/donna/decollete_cod44721796uk.html"> <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Décolleté" data-src="http://placehold.it/220x280"> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280?text=19 1x, http://placehold.it/440x560?text=19 2x" + /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420?text=19 1x, http://placehold.it/660x840?text=19 2x" + /> + <img class="lazy" alt="Décolleté" data-src="http://placehold.it/220x280?text=19"> </picture> </a> </li> <li> <a href="#/it/donna/francesine_cod44717679mj.html"> <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Francesine" data-src="http://placehold.it/220x280"> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280?text=20 1x, http://placehold.it/440x560?text=20 2x" + /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420?text=20 1x, http://placehold.it/660x840?text=20 2x" + /> + <img class="lazy" alt="Francesine" data-src="http://placehold.it/220x280?text=20"> </picture> </a> </li> <li> <a href="#/it/donna/stivaletti_cod44724594vu.html"> <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280"> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280?text=21 1x, http://placehold.it/440x560?text=21 2x" + /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420?text=21 1x, http://placehold.it/660x840?text=21 2x" + /> + <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280?text=21"> </picture> </a> </li> <li> <a href="#/it/donna/decollete_cod44726148aq.html"> <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Décolleté" data-src="http://placehold.it/220x280"> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280?text=22 1x, http://placehold.it/440x560?text=22 2x" + /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420?text=22 1x, http://placehold.it/660x840?text=22 2x" + /> + <img class="lazy" alt="Décolleté" data-src="http://placehold.it/220x280?text=22"> </picture> </a> </li> <li> <a href="#/it/donna/mocassini_cod44719629nt.html"> <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Mocassini" data-src="http://placehold.it/220x280"> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280?text=23 1x, http://placehold.it/440x560?text=23 2x" + /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420?text=23 1x, http://placehold.it/660x840?text=23 2x" + /> + <img class="lazy" alt="Mocassini" data-src="http://placehold.it/220x280?text=23"> </picture> </a> </li> <li> <a href="#/it/donna/mocassini_cod44725329kq.html"> <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Mocassini" data-src="http://placehold.it/220x280"> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280?text=24 1x, http://placehold.it/440x560?text=24 2x" + /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420?text=24 1x, http://placehold.it/660x840?text=24 2x" + /> + <img class="lazy" alt="Mocassini" data-src="http://placehold.it/220x280?text=24"> </picture> </a> </li> <li> <a href="#/it/donna/stivali_cod44724026qs.html"> <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Stivali" data-src="http://placehold.it/220x280"> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280?text=25 1x, http://placehold.it/440x560?text=25 2x" + /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420?text=25 1x, http://placehold.it/660x840?text=25 2x" + /> + <img class="lazy" alt="Stivali" data-src="http://placehold.it/220x280?text=25"> </picture> </a> </li> <li> <a href="#/it/donna/stivaletti_cod44720256gw.html"> <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280"> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280?text=26 1x, http://placehold.it/440x560?text=26 2x" + /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420?text=26 1x, http://placehold.it/660x840?text=26 2x" + /> + <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280?text=26"> </picture> </a> </li> <li> <a href="#/it/donna/stivaletti_cod44722062id.html"> <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280"> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280?text=27 1x, http://placehold.it/440x560?text=27 2x" + /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420?text=27 1x, http://placehold.it/660x840?text=27 2x" + /> + <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280?text=27"> </picture> </a> </li> <li> <a href="#/it/donna/mocassini_cod44722402rh.html"> <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Mocassini" data-src="http://placehold.it/220x280"> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280?text=28 1x, http://placehold.it/440x560?text=28 2x" + /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420?text=28 1x, http://placehold.it/660x840?text=28 2x" + /> + <img class="lazy" alt="Mocassini" data-src="http://placehold.it/220x280?text=28"> </picture> </a> </li> <li> <a href="#/it/donna/stivaletti_cod44726296vu.html"> <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280"> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280?text=29 1x, http://placehold.it/440x560?text=29 2x" + /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420?text=29 1x, http://placehold.it/660x840?text=29 2x" + /> + <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280?text=29"> </picture> </a> </li> <li> <a href="#/it/donna/stivaletti_cod44725755ct.html"> <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280"> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280?text=30 1x, http://placehold.it/440x560?text=30 2x" + /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420?text=30 1x, http://placehold.it/660x840?text=30 2x" + /> + <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280?text=30"> </picture> </a> </li> <li> <a href="#/it/donna/stivaletti_cod44725348nv.html"> <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280"> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280?text=31 1x, http://placehold.it/440x560?text=31 2x" + /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420?text=31 1x, http://placehold.it/660x840?text=31 2x" + /> + <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280?text=31"> </picture> </a> </li> <li> <a href="#/it/donna/stivaletti_cod44721879xx.html"> <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280"> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280?text=32 1x, http://placehold.it/440x560?text=32 2x" + /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420?text=32 1x, http://placehold.it/660x840?text=32 2x" + /> + <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280?text=32"> </picture> </a> </li> <li> <a href="#/it/donna/cuissardes_cod44729472iq.html"> <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Cuissardes" data-src="http://placehold.it/220x280"> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280?text=33 1x, http://placehold.it/440x560?text=33 2x" + /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420?text=33 1x, http://placehold.it/660x840?text=33 2x" + /> + <img class="lazy" alt="Cuissardes" data-src="http://placehold.it/220x280?text=33"> </picture> </a> </li> <li> <a href="#/it/donna/decollete_cod44725388jv.html"> <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Décolleté" data-src="http://placehold.it/220x280"> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280?text=34 1x, http://placehold.it/440x560?text=34 2x" + /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420?text=34 1x, http://placehold.it/660x840?text=34 2x" + /> + <img class="lazy" alt="Décolleté" data-src="http://placehold.it/220x280?text=34"> </picture> </a> </li> <li> <a href="#/it/donna/stivaletti_cod44721854ce.html"> <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280"> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280?text=35 1x, http://placehold.it/440x560?text=35 2x" + /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420?text=35 1x, http://placehold.it/660x840?text=35 2x" + /> + <img class="lazy" alt="Stivaletti" data-src="http://placehold.it/220x280?text=35"> </picture> </a> </li> <li> <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html"> <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Sneakers & Tennis shoes basse" data-src="http://placehold.it/220x280"> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280?text=36 1x, http://placehold.it/440x560?text=36 2x" + /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420?text=36 1x, http://placehold.it/660x840?text=36 2x" + /> + <img class="lazy" alt="Sneakers & Tennis shoes basse" data-src="http://placehold.it/220x280?text=36"> </picture> </a> </li> <li> <a href="#/it/donna/mocassini_cod44727501hh.html"> <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Mocassini" data-src="http://placehold.it/220x280"> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280?text=37 1x, http://placehold.it/440x560?text=37 2x" + /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420?text=37 1x, http://placehold.it/660x840?text=37 2x" + /> + <img class="lazy" alt="Mocassini" data-src="http://placehold.it/220x280?text=37"> </picture> </a> </li> <li> <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html"> <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Sneakers & Tennis shoes basse" data-src="http://placehold.it/220x280"> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280?text=38 1x, http://placehold.it/440x560?text=38 2x" + /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420?text=38 1x, http://placehold.it/660x840?text=38 2x" + /> + <img class="lazy" alt="Sneakers & Tennis shoes basse" data-src="http://placehold.it/220x280?text=38"> </picture> </a> </li> <li> <a href="#/it/donna/mocassini_cod44704882bq.html"> <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Mocassini" data-src="http://placehold.it/220x280"> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280?text=39 1x, http://placehold.it/440x560?text=39 2x" + /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420?text=39 1x, http://placehold.it/660x840?text=39 2x" + /> + <img class="lazy" alt="Mocassini" data-src="http://placehold.it/220x280?text=39"> </picture> </a> </li> <li> <a href="#/it/donna/mocassini_cod44734002vc.html"> <picture> - <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280 1x, http://placehold.it/440x560 2x" /> - <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420 1x, http://placehold.it/660x840 2x" /> - <img class="lazy" alt="Mocassini" data-src="http://placehold.it/220x280"> + <source media="(min-width: 1024px)" data-srcset="http://placehold.it/220x280?text=40 1x, http://placehold.it/440x560?text=40 2x" + /> + <source media="(min-width: 500px)" data-srcset="http://placehold.it/330x420?text=40 1x, http://placehold.it/660x840?text=40 2x" + /> + <img class="lazy" alt="Mocassini" data-src="http://placehold.it/220x280?text=40"> </picture> </a> </li> From d5cc6f51095df4586c73c8127cd6cdd28c1784bd Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi <verlicchia@yoox.net> Date: Fri, 20 Jul 2018 12:21:14 +0200 Subject: [PATCH 17/19] Lazy load only targets lazy images --- demos/callbacks_picture.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/demos/callbacks_picture.html b/demos/callbacks_picture.html index 9db7d525..c3eb50c0 100644 --- a/demos/callbacks_picture.html +++ b/demos/callbacks_picture.html @@ -498,6 +498,8 @@ } ll = new LazyLoad({ + elements_selector: '.lazy', + callback_enter: function (element) { logElementEvent("ENTERED", element); }, From dd0ae01e2efc95994b6d82722faecc5cb1e8d287 Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi <verlicchia@yoox.net> Date: Fri, 20 Jul 2018 12:25:31 +0200 Subject: [PATCH 18/19] Changed fallback image url --- demos/callbacks_picture.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demos/callbacks_picture.html b/demos/callbacks_picture.html index c3eb50c0..8c331c16 100644 --- a/demos/callbacks_picture.html +++ b/demos/callbacks_picture.html @@ -511,7 +511,7 @@ }, callback_error: function (element) { logElementEvent("ERROR", element); - element.src = "https://placeholdit.imgix.net/~text?txtsize=21&txt=Fallback%20image&w=220&h=280"; + element.src = "http://placehold.it/220x280?text=FallbackImage"; } }); }()); From 016c951bb00768060aba4d6082a6e94e76de9e51 Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi <verlicchia@yoox.net> Date: Fri, 20 Jul 2018 12:26:02 +0200 Subject: [PATCH 19/19] Lazily loading from the 3rd image on --- demos/callbacks.html | 82 +++++++++++++++++++++++--------------------- 1 file changed, 42 insertions(+), 40 deletions(-) diff --git a/demos/callbacks.html b/demos/callbacks.html index fea91eef..43f74f1b 100644 --- a/demos/callbacks.html +++ b/demos/callbacks.html @@ -49,202 +49,202 @@ <ul> <li> <a href="#/it/donna/stivaletti_cod44721746jj.html"> - <img alt="Stivaletti" data-src="../img/44721746JJ_15_a.jpg" width="220" height="280"> + <img alt="Stivaletti" src="../img/44721746JJ_15_a.jpg" width="220" height="280"> </a> </li> <li> <a href="#/it/donna/open-toe_cod44740806jx.html"> - <img alt="Open toe" data-src="../img/44740806JX_15_r.jpg" width="220" height="280"> + <img alt="Open toe" src="../img/44740806JX_15_r.jpg" width="220" height="280"> </a> </li> <li> <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html"> - <img alt="Sneakers & Tennis" data-src="../img/error.jpg" width="220" height="280"> + <img class="lazy" alt="Sneakers & Tennis" data-src="../img/error.jpg" width="220" height="280"> </a> </li> <li> <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html"> - <img alt="Sneakers & Tennis shoes basse" data-src="../img/44738717AM_15_a.jpg" width="220" height="280"> + <img class="lazy" alt="Sneakers & Tennis shoes basse" data-src="../img/44738717AM_15_a.jpg" width="220" height="280"> </a> </li> <li> <a href="#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html"> - <img alt="Sneakers & Tennis shoes alte" data-src="../img/44739940CB_15_a.jpg" width="220" height="280"> + <img class="lazy" alt="Sneakers & Tennis shoes alte" data-src="../img/44739940CB_15_a.jpg" width="220" height="280"> </a> </li> <li> <a href="#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html"> - <img alt="Sneakers & Tennis shoes alte" data-src="../img/44740860XG_15_a.jpg" width="220" height="280"> + <img class="lazy" alt="Sneakers & Tennis shoes alte" data-src="../img/44740860XG_15_a.jpg" width="220" height="280"> </a> </li> <li> <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html"> - <img alt="Sneakers & Tennis shoes basse" data-src="../img/44738719VN_15_a.jpg" width="220" height="280"> + <img class="lazy" alt="Sneakers & Tennis shoes basse" data-src="../img/44738719VN_15_a.jpg" width="220" height="280"> </a> </li> <li> <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html"> - <img alt="Sneakers & Tennis shoes basse" data-src="../img/44739938WK_15_a.jpg" width="220" height="280"> + <img class="lazy" alt="Sneakers & Tennis shoes basse" data-src="../img/44739938WK_15_a.jpg" width="220" height="280"> </a> </li> <li> <a href="#/it/donna/stivali_cod44736534fq.html"> - <img alt="Stivali" data-src="../img/44736534FQ_15_a.jpg" width="220" height="280"> + <img class="lazy" alt="Stivali" data-src="../img/44736534FQ_15_a.jpg" width="220" height="280"> </a> </li> <li> <a href="#/it/donna/stivali_cod44735388ui.html"> - <img alt="Stivali" data-src="../img/44735388UI_15_a.jpg" width="220" height="280"> + <img class="lazy" alt="Stivali" data-src="../img/44735388UI_15_a.jpg" width="220" height="280"> </a> </li> <li> <a href="#/it/donna/stivaletti_cod44739165ev.html"> - <img alt="Stivaletti" data-src="../img/44739165EV_15_a.jpg" width="220" height="280"> + <img class="lazy" alt="Stivaletti" data-src="../img/44739165EV_15_a.jpg" width="220" height="280"> </a> </li> <li> <a href="#/it/donna/stivaletti_cod44739454hf.html"> - <img alt="Stivaletti" data-src="../img/44739454HF_15_a.jpg" width="220" height="280"> + <img class="lazy" alt="Stivaletti" data-src="../img/44739454HF_15_a.jpg" width="220" height="280"> </a> </li> <li> <a href="#/it/donna/stivali_cod44719480km.html"> - <img alt="Stivali" data-src="../img/44719480KM_15_a.jpg" width="220" height="280"> + <img class="lazy" alt="Stivali" data-src="../img/44719480KM_15_a.jpg" width="220" height="280"> </a> </li> <li> <a href="#/it/donna/stivaletti_cod44719687td.html"> - <img alt="Stivaletti" data-src="../img/44719687TD_15_a.jpg" width="220" height="280"> + <img class="lazy" alt="Stivaletti" data-src="../img/44719687TD_15_a.jpg" width="220" height="280"> </a> </li> <li> <a href="#/it/donna/decollete_cod44721899ng.html"> - <img alt="Décolleté" data-src="../img/44721899NG_15_a.jpg" width="220" height="280"> + <img class="lazy" alt="Décolleté" data-src="../img/44721899NG_15_a.jpg" width="220" height="280"> </a> </li> <li> <a href="#/it/donna/mocassini_cod44721744sl.html"> - <img alt="Mocassini" data-src="../img/44721744SL_15_a.jpg" width="220" height="280"> + <img class="lazy" alt="Mocassini" data-src="../img/44721744SL_15_a.jpg" width="220" height="280"> </a> </li> <li> <a href="#/it/donna/stivaletti_cod44716730kr.html"> - <img alt="Stivaletti" data-src="../img/44716730KR_15_a.jpg" width="220" height="280"> + <img class="lazy" alt="Stivaletti" data-src="../img/44716730KR_15_a.jpg" width="220" height="280"> </a> </li> <li> <a href="#/it/donna/decollete_cod44718734xl.html"> - <img alt="Décolleté" data-src="../img/44718734XL_15_a.jpg" width="220" height="280"> + <img class="lazy" alt="Décolleté" data-src="../img/44718734XL_15_a.jpg" width="220" height="280"> </a> </li> <li> <a href="#/it/donna/decollete_cod44721796uk.html"> - <img alt="Décolleté" data-src="../img/44721796UK_15_a.jpg" width="220" height="280"> + <img class="lazy" alt="Décolleté" data-src="../img/44721796UK_15_a.jpg" width="220" height="280"> </a> </li> <li> <a href="#/it/donna/francesine_cod44717679mj.html"> - <img alt="Francesine" data-src="../img/44717679MJ_15_a.jpg" width="220" height="280"> + <img class="lazy" alt="Francesine" data-src="../img/44717679MJ_15_a.jpg" width="220" height="280"> </a> </li> <li> <a href="#/it/donna/stivaletti_cod44724594vu.html"> - <img alt="Stivaletti" data-src="../img/44724594VU_15_a.jpg" width="220" height="280"> + <img class="lazy" alt="Stivaletti" data-src="../img/44724594VU_15_a.jpg" width="220" height="280"> </a> </li> <li> <a href="#/it/donna/decollete_cod44726148aq.html"> - <img alt="Décolleté" data-src="../img/44726148AQ_15_a.jpg" width="220" height="280"> + <img class="lazy" alt="Décolleté" data-src="../img/44726148AQ_15_a.jpg" width="220" height="280"> </a> </li> <li> <a href="#/it/donna/mocassini_cod44719629nt.html"> - <img alt="Mocassini" data-src="../img/44719629NT_15_a.jpg" width="220" height="280"> + <img class="lazy" alt="Mocassini" data-src="../img/44719629NT_15_a.jpg" width="220" height="280"> </a> </li> <li> <a href="#/it/donna/mocassini_cod44725329kq.html"> - <img alt="Mocassini" data-src="../img/44725329KQ_15_a.jpg" width="220" height="280"> + <img class="lazy" alt="Mocassini" data-src="../img/44725329KQ_15_a.jpg" width="220" height="280"> </a> </li> <li> <a href="#/it/donna/stivali_cod44724026qs.html"> - <img alt="Stivali" data-src="../img/44724026QS_15_a.jpg" width="220" height="280"> + <img class="lazy" alt="Stivali" data-src="../img/44724026QS_15_a.jpg" width="220" height="280"> </a> </li> <li> <a href="#/it/donna/stivaletti_cod44720256gw.html"> - <img alt="Stivaletti" data-src="../img/44720256GW_15_a.jpg" width="220" height="280"> + <img class="lazy" alt="Stivaletti" data-src="../img/44720256GW_15_a.jpg" width="220" height="280"> </a> </li> <li> <a href="#/it/donna/stivaletti_cod44722062id.html"> - <img alt="Stivaletti" data-src="../img/44722062ID_15_a.jpg" width="220" height="280"> + <img class="lazy" alt="Stivaletti" data-src="../img/44722062ID_15_a.jpg" width="220" height="280"> </a> </li> <li> <a href="#/it/donna/mocassini_cod44722402rh.html"> - <img alt="Mocassini" data-src="../img/44722402RH_15_a.jpg" width="220" height="280"> + <img class="lazy" alt="Mocassini" data-src="../img/44722402RH_15_a.jpg" width="220" height="280"> </a> </li> <li> <a href="#/it/donna/stivaletti_cod44726296vu.html"> - <img alt="Stivaletti" data-src="../img/44726296VU_15_a.jpg" width="220" height="280"> + <img class="lazy" alt="Stivaletti" data-src="../img/44726296VU_15_a.jpg" width="220" height="280"> </a> </li> <li> <a href="#/it/donna/stivaletti_cod44725755ct.html"> - <img alt="Stivaletti" data-src="../img/44725755CT_15_a.jpg" width="220" height="280"> + <img class="lazy" alt="Stivaletti" data-src="../img/44725755CT_15_a.jpg" width="220" height="280"> </a> </li> <li> <a href="#/it/donna/stivaletti_cod44725348nv.html"> - <img alt="Stivaletti" data-src="../img/error.jpg" width="220" height="280"> + <img class="lazy" alt="Stivaletti" data-src="../img/error.jpg" width="220" height="280"> </a> </li> <li> <a href="#/it/donna/stivaletti_cod44721879xx.html"> - <img alt="Stivaletti" data-src="../img/44721879XX_15_a.jpg" width="220" height="280"> + <img class="lazy" alt="Stivaletti" data-src="../img/44721879XX_15_a.jpg" width="220" height="280"> </a> </li> <li> <a href="#/it/donna/cuissardes_cod44729472iq.html"> - <img alt="Cuissardes" data-src="../img/44729472IQ_15_a.jpg" width="220" height="280"> + <img class="lazy" alt="Cuissardes" data-src="../img/44729472IQ_15_a.jpg" width="220" height="280"> </a> </li> <li> <a href="#/it/donna/decollete_cod44725388jv.html"> - <img alt="Décolleté" data-src="../img/44725388JV_15_a.jpg" width="220" height="280"> + <img class="lazy" alt="Décolleté" data-src="../img/44725388JV_15_a.jpg" width="220" height="280"> </a> </li> <li> <a href="#/it/donna/stivaletti_cod44721854ce.html"> - <img alt="Stivaletti" data-src="../img/44721854CE_15_a.jpg" width="220" height="280"> + <img class="lazy" alt="Stivaletti" data-src="../img/44721854CE_15_a.jpg" width="220" height="280"> </a> </li> <li> <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html"> - <img alt="Sneakers & Tennis shoes basse" data-src="../img/44727690JP_15_a.jpg" width="220" height="280"> + <img class="lazy" alt="Sneakers & Tennis shoes basse" data-src="../img/44727690JP_15_a.jpg" width="220" height="280"> </a> </li> <li> <a href="#/it/donna/mocassini_cod44727501hh.html"> - <img alt="Mocassini" data-src="../img/44727501HH_15_a.jpg" width="220" height="280"> + <img class="lazy" alt="Mocassini" data-src="../img/44727501HH_15_a.jpg" width="220" height="280"> </a> </li> <li> <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html"> - <img alt="Sneakers & Tennis shoes basse" data-src="../img/44727038AQ_15_a.jpg" width="220" height="280"> + <img class="lazy" alt="Sneakers & Tennis shoes basse" data-src="../img/44727038AQ_15_a.jpg" width="220" height="280"> </a> </li> <li> <a href="#/it/donna/mocassini_cod44704882bq.html"> - <img alt="Mocassini" data-src="../img/44704882BQ_15_a.jpg" width="220" height="280"> + <img class="lazy" alt="Mocassini" data-src="../img/44704882BQ_15_a.jpg" width="220" height="280"> </a> </li> <li> <a href="#/it/donna/mocassini_cod44734002vc.html"> - <img alt="Mocassini" data-src="../img/error.jpg" width="220" height="280"> + <img class="lazy" alt="Mocassini" data-src="../img/error.jpg" width="220" height="280"> </a> </li> </ul> @@ -257,6 +257,8 @@ } ll = new LazyLoad({ + elements_selector: '.lazy', + callback_enter: function (element) { logElementEvent("ENTERED", element); },