From c4bd4237e44d54707bdcae8bcb975e505c64ede0 Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi Date: Thu, 25 Jun 2020 16:00:42 +0200 Subject: [PATCH 1/7] Refactoring method names --- src/lazyload.cancelOnExit.js | 2 +- src/lazyload.intersectionHandlers.js | 8 ++++---- src/lazyload.unobserve.js | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/lazyload.cancelOnExit.js b/src/lazyload.cancelOnExit.js index 5733ea07..042d4856 100644 --- a/src/lazyload.cancelOnExit.js +++ b/src/lazyload.cancelOnExit.js @@ -5,7 +5,7 @@ import { removeClass } from "./lazyload.class"; import { updateLoadingCount } from "./lazyload.counters"; import { resetStatus, hasStatusLoading } from "./lazyload.data"; -export const cancelLoadingIfRequired = (element, entry, settings, instance) => { +export const cancelLoading = (element, entry, settings, instance) => { if (!settings.cancel_on_exit) return; if (!hasStatusLoading(element)) return; if (element.tagName !== "IMG") return; //Works only on images diff --git a/src/lazyload.intersectionHandlers.js b/src/lazyload.intersectionHandlers.js index ed2114f9..c2c9ee0a 100644 --- a/src/lazyload.intersectionHandlers.js +++ b/src/lazyload.intersectionHandlers.js @@ -1,18 +1,18 @@ import { safeCallback } from "./lazyload.callback"; import { load } from "./lazyload.load"; import { hasEmptyStatus, hadStartedLoading } from "./lazyload.data"; -import { cancelLoadingIfRequired } from "./lazyload.cancelOnExit"; -import { unobserveIfRequired } from "./lazyload.unobserve"; +import { cancelLoading } from "./lazyload.cancelOnExit"; +import { unobserveEntered } from "./lazyload.unobserve"; export const onEnter = (element, entry, settings, instance) => { safeCallback(settings.callback_enter, element, entry, instance); - unobserveIfRequired(element, settings, instance); + unobserveEntered(element, settings, instance); if (hadStartedLoading(element)) return; //Prevent loading it again load(element, settings, instance); }; export const onExit = (element, entry, settings, instance) => { if (hasEmptyStatus(element)) return; //Ignore the first pass, at landing - cancelLoadingIfRequired(element, entry, settings, instance); + cancelLoading(element, entry, settings, instance); safeCallback(settings.callback_exit, element, entry, instance); }; diff --git a/src/lazyload.unobserve.js b/src/lazyload.unobserve.js index 2f8cb150..781a4adc 100644 --- a/src/lazyload.unobserve.js +++ b/src/lazyload.unobserve.js @@ -9,6 +9,6 @@ export const resetObserver = (observer) => { observer.disconnect(); }; -export const unobserveIfRequired = (element, settings, instance) => { +export const unobserveEntered = (element, settings, instance) => { if (settings.unobserve_entered) unobserve(element, instance); } \ No newline at end of file From 870df07b9fa59462f86a2b8e3270ffa394276c29 Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi Date: Thu, 25 Jun 2020 16:36:56 +0200 Subject: [PATCH 2/7] Added all callbacks to lazyfunctions demo --- demos/lazy_functions.html | 591 ++++++++++++++++++++------------------ 1 file changed, 311 insertions(+), 280 deletions(-) diff --git a/demos/lazy_functions.html b/demos/lazy_functions.html index 45f02445..3a79f4c0 100644 --- a/demos/lazy_functions.html +++ b/demos/lazy_functions.html @@ -1,290 +1,321 @@ - - - - Lazy functions - Lazyload demos - - - - + /* Fixes Firefox anomaly during image load */ + @-moz-document url-prefix() { + img:-moz-loading { + visibility: hidden; + } + } + + - -

Lazy functions demo

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam quisquam laboriosam soluta - veniam! Beatae tempora dicta voluptate consequuntur, nesciunt sequi alias quidem - blanditiis obcaecati praesentium aut sint nobis aliquid ullam! -

-

- Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum cum unde aliquid ad - quidem hic temporibus obcaecati quas sunt! Eius nisi ex ipsa suscipit aliquid velit - sequi exercitationem itaque fuga! -

-

- Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio, quo, aliquid adipisci - rerum, in quas ratione cupiditate sapiente iure aliquam molestiae provident maiores qui - odit. Aut placeat deserunt libero quod? -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum deleniti dolorem hic - autem at rem error non quos pariatur fugit. Distinctio est accusamus exercitationem - nesciunt. Molestias blanditiis temporibus asperiores impedit! -

-

- Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti, aut ea. Perferendis - facere tempore nemo eos illo consequatur! Ad quibusdam quis porro ipsam praesentium - tenetur totam? Eum exercitationem laudantium praesentium! -

-

- Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorum, alias omnis eveniet - maxime rem nulla sed modi et, fugit eius ut praesentium exercitationem incidunt - accusamus excepturi a laudantium fugiat id. -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum, fuga dignissimos. Nihil - provident est quasi harum id sint enim officiis maxime facere incidunt quibusdam ab, - magni iusto veritatis doloremque expedita. -

-

- Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatum numquam ipsam harum - voluptates? Excepturi laboriosam quasi saepe. Quia officiis odit minus cumque, corporis, - incidunt harum quod fuga placeat optio deserunt? -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto exercitationem, - dolorum quibusdam nihil nisi vitae veritatis recusandae nostrum cum enim iste unde - fugiat esse voluptatum, voluptatem magnam, repudiandae veniam. Doloribus. -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat similique - necessitatibus minima atque sed debitis, sunt quasi esse consequatur qui, facilis - temporibus voluptate eaque labore. Distinctio et accusantium doloremque officia. -

-
Script execution here
-

- Cumque explicabo iusto voluptates nostrum dolor tempore et sequi doloremque aspernatur - id cum soluta rerum debitis mollitia numquam, officiis molestias optio? Placeat tempora - porro odit expedita a ipsam provident atque! -

-

- Id, alias reiciendis animi incidunt quibusdam beatae neque ipsum illum inventore - commodi, sunt similique labore at hic tempora. Sed est necessitatibus ea! Repellendus, - nemo fugit pariatur soluta omnis modi explicabo! -

-

- Quas quia illo harum qui distinctio earum ullam. Est incidunt temporibus, repellendus - rem fugiat dolor sit inventore! Soluta illum, minus totam autem fugiat recusandae - eveniet sed ipsam officia ullam modi. -

-

- Minima eveniet quisquam quaerat natus nam voluptatibus eum fuga, aliquid doloribus - reiciendis vero culpa eaque eligendi omnis delectus, dolores commodi tenetur optio eos - temporibus sapiente accusantium. Maxime similique odit iusto! -

-

- Quae quas explicabo mollitia neque at error molestiae debitis nisi, iusto eum repellat - doloribus sequi voluptatibus numquam quisquam quidem alias quibusdam enim? Id illo - veritatis inventore quo recusandae esse vero. -

-

- Cum suscipit quae, rem dolor corrupti commodi placeat atque numquam? Perferendis, modi? - Explicabo ad quisquam in id corporis labore. Reiciendis dolore magni voluptas ex, iste - officia eius accusamus facilis cumque. -

-

- Hic dignissimos voluptate fugit officia atque reiciendis cumque explicabo impedit esse - aperiam nesciunt beatae quibusdam illum unde facere, repellat ipsa optio nostrum - distinctio consectetur numquam. Eos delectus quaerat fugiat laboriosam! -

-

- Temporibus, corrupti fuga. Suscipit, quaerat laborum quod quos nisi quam quia earum - cupiditate cumque sed facilis, rerum modi soluta, ex placeat doloribus! Tempora - voluptates consequuntur distinctio eius modi amet qui! -

-

- Consectetur esse illo excepturi numquam voluptas temporibus voluptatem distinctio ipsa - nisi molestiae sint aliquam cumque quod sunt officiis, quibusdam a, beatae eum, suscipit - obcaecati? Ut non beatae corporis a quo. -

-

- Facere blanditiis minus laudantium alias explicabo assumenda tempora? Rerum eos, quo in - animi cupiditate eaque, vel corporis aut beatae distinctio labore dignissimos, adipisci - deserunt esse voluptatibus. Facere nemo sit fugiat. -

-
Script execution here
-

- Quo at deserunt hic molestiae. Veritatis vero labore consequatur, est, eaque nostrum - nesciunt velit, praesentium corporis obcaecati exercitationem voluptatem tempore. Quae - quod mollitia fugit iusto saepe veritatis qui ipsum magni? -

-

- Modi tenetur aperiam laudantium eveniet rem, soluta in fugit earum vero unde ipsam - cupiditate ducimus fuga hic velit libero temporibus maiores voluptatem adipisci. - Inventore ducimus expedita numquam ea ex deserunt! -

-

- Quisquam quam molestiae nemo veniam mollitia doloremque modi rerum tempore voluptate at - consequatur praesentium rem consequuntur eos provident tenetur quibusdam, et iste - similique. Delectus deleniti et, eaque illum itaque hic! -

-

- Quos, voluptates esse recusandae consequuntur omnis eaque explicabo expedita voluptate - ea perferendis, porro hic soluta nulla dolore. Excepturi accusamus reprehenderit - temporibus explicabo quo sint sed, nobis dolores, velit alias nostrum. -

-

- Culpa hic quasi modi similique voluptatum cumque beatae nulla autem esse mollitia natus - nihil aspernatur sed magnam, expedita est recusandae quisquam. Cumque accusamus ad porro - necessitatibus in adipisci nihil doloribus. -

-

- Atque modi possimus aliquid eum consequuntur. Pariatur, blanditiis autem? Placeat - repudiandae eius dolorum vero iusto ad fugit doloremque molestiae eum qui necessitatibus - deserunt blanditiis illum, ea, expedita corporis odit vel. -

-

- Vero obcaecati explicabo iure aperiam aut modi architecto consectetur voluptatibus eos. - Deleniti, temporibus! Aliquid dignissimos a, pariatur, voluptates hic dolores cupiditate - atque ratione aliquam voluptatum accusantium corrupti tempora, doloribus incidunt! -

-

- Nostrum hic deleniti tempora sunt laudantium ullam deserunt ut et vero recusandae! Nam - at, voluptatibus unde eveniet sunt reprehenderit tempore ut consequuntur eum dolores - harum, earum assumenda, eos eius mollitia! -

-

- Labore explicabo voluptas assumenda ratione? Amet sunt deleniti nulla minima ipsam vel - odit reprehenderit soluta et iste adipisci, minus illo, ea enim error debitis quidem - consequuntur quia! Tenetur, dolorem modi. -

-

- Voluptates eligendi tempore nostrum, quasi veritatis similique quibusdam consectetur - voluptatibus adipisci aliquid laborum dignissimos tempora excepturi soluta atque harum - recusandae eum iste enim maiores. Nesciunt tenetur error quisquam voluptatem amet? -

-
Script execution here
-

- Eligendi aspernatur itaque esse nisi! Illo consequatur repellat, eius, laborum hic - corporis ad voluptates nesciunt quo maiores aut itaque animi odit ipsum deserunt minima - architecto maxime at quas repellendus debitis. -

-

- Sapiente, ipsum incidunt doloremque ipsam ullam laborum distinctio nemo facere - voluptatum saepe reiciendis iure tenetur voluptatibus modi adipisci! Pariatur possimus - dolores labore itaque autem dolore, accusantium omnis saepe incidunt veritatis? -

-

- Natus impedit eaque similique sint maiores? Cum dolores, non molestiae vitae expedita - inventore harum corporis porro iusto possimus ullam dolor, autem fugit earum deserunt - eum in quos commodi a sunt. -

-

- Architecto repellat nemo veritatis natus modi quod laudantium nulla quidem ipsa, - inventore, vitae reiciendis excepturi! Excepturi, esse ullam atque unde facilis - doloremque ipsum et aperiam ipsa facere! Esse, quibusdam odit! -

-

- Eveniet facere, sit dolorem natus maxime quasi voluptate possimus, temporibus maiores - doloribus laborum minus neque nam itaque voluptatibus. Eum nihil aperiam eos voluptatem - sunt natus quos cum expedita sapiente ea! -

-

- Voluptate nobis, dicta commodi ut id iure! Consequatur blanditiis aut ut quasi amet - magni tempore, natus repellat dolorem repudiandae, recusandae voluptates eveniet vitae, - officia non aspernatur ratione tempora distinctio porro? -

-

- Cum consectetur voluptatem natus odit alias, a dolore dicta fugit sunt amet dolores - repudiandae eaque facilis iure quae minima, voluptas praesentium ipsam! Praesentium - iusto soluta alias dolore amet minus odio? -

-

- Hic labore assumenda officiis ducimus iure aperiam at maiores natus quas quia nostrum, - enim eaque soluta, repellat dolore est quidem ab adipisci suscipit nesciunt doloremque! - Et expedita quis veniam dolore. -

-

- Harum, aliquid? Repellat, necessitatibus? Pariatur veniam atque vel dolorem fugiat ad - reiciendis, voluptate quia provident laborum incidunt minus dolorum nemo necessitatibus - earum, omnis ullam consequatur! Accusantium fuga animi incidunt nesciunt. -

-

- Quisquam a nulla veniam labore, quasi ipsa numquam saepe sint ratione ea. Doloribus quos - molestias vitae earum repellat corrupti ad corporis at, nam nobis officia dolores magni - illo fugiat a. -

-
Script execution here
- - - + + - + var callback_exit = function (element) { + logElementEvent("🚪 EXITED", element); + }; + var callback_loading = function (element) { + logElementEvent("⌚ LOADING", element); + }; + var callback_loaded = function (element) { + logElementEvent("👍 LOADED", element); + }; + var callback_error = function (element) { + logElementEvent("💀 ERROR", element); + element.src = "https://via.placeholder.com/440x560/?text=Error+Placeholder"; + }; + var callback_finish = function () { + logElementEvent("✔️ FINISHED", document.documentElement); + }; + var callback_cancel = function (element) { + logElementEvent("🔥 CANCEL", element); + }; + + function executeLazyScript(element) { + logElementEvent("🔑 ENTERED", element); + var lazyFunctionName = element.getAttribute("data-lazy-function"); + var lazyFunction = lazyFunctions[lazyFunctionName]; + if (!lazyFunction) return; + lazyFunction(element); + } + + var ll = new LazyLoad({ + unobserve_entered: true, // <- To avoid executing the script multiple times + callback_enter: executeLazyScript, // Assigning the function defined above + callback_exit: callback_exit, + callback_loading: callback_loading, + callback_loaded: callback_loaded, + callback_error: callback_error, + callback_finish: callback_finish, + callback_cancel: callback_cancel + }); + })(); + + From 2cd50f3fa2d2bd86ea5608a7888e22c7df6bb659 Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi Date: Thu, 25 Jun 2020 16:37:15 +0200 Subject: [PATCH 3/7] Fixes #468 --- src/lazyload.elementStatus.js | 1 + src/lazyload.intersectionHandlers.js | 6 ++++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/lazyload.elementStatus.js b/src/lazyload.elementStatus.js index 6155548c..900d58c2 100644 --- a/src/lazyload.elementStatus.js +++ b/src/lazyload.elementStatus.js @@ -1,5 +1,6 @@ export const statusLoading = "loading"; export const statusLoaded = "loaded"; export const statusApplied = "applied"; +export const statusEntered = "entered"; export const statusError = "error"; export const statusNative = "native"; diff --git a/src/lazyload.intersectionHandlers.js b/src/lazyload.intersectionHandlers.js index c2c9ee0a..7a3c1a00 100644 --- a/src/lazyload.intersectionHandlers.js +++ b/src/lazyload.intersectionHandlers.js @@ -1,12 +1,14 @@ import { safeCallback } from "./lazyload.callback"; import { load } from "./lazyload.load"; -import { hasEmptyStatus, hadStartedLoading } from "./lazyload.data"; +import { hasEmptyStatus, hadStartedLoading, setStatus } from "./lazyload.data"; import { cancelLoading } from "./lazyload.cancelOnExit"; import { unobserveEntered } from "./lazyload.unobserve"; +import { statusEntered } from "./lazyload.elementStatus"; export const onEnter = (element, entry, settings, instance) => { - safeCallback(settings.callback_enter, element, entry, instance); + setStatus(element, statusEntered); unobserveEntered(element, settings, instance); + safeCallback(settings.callback_enter, element, entry, instance); if (hadStartedLoading(element)) return; //Prevent loading it again load(element, settings, instance); }; From 610a2d0ea115852fe93c68b946066aeccfccfe9e Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi Date: Thu, 25 Jun 2020 16:48:27 +0200 Subject: [PATCH 4/7] Exposing global LL in image hidden demo --- demos/image_hidden.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demos/image_hidden.html b/demos/image_hidden.html index 47527917..f05a489c 100644 --- a/demos/image_hidden.html +++ b/demos/image_hidden.html @@ -190,7 +190,7 @@

Hidden images demo

logElementEvent("✔️ FINISHED", document.documentElement); }; - var ll = new LazyLoad({ + window.LL = new LazyLoad({ threshold: 0, // Assign the callbacks defined above callback_enter: callback_enter, From bccc461513f77f2225995d62c8329e5db8d732fd Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi Date: Thu, 25 Jun 2020 17:08:27 +0200 Subject: [PATCH 5/7] Fixing async multiple demo --- demos/async_multiple.html | 45 ++++++++++++++++++++++++++++++++++----- 1 file changed, 40 insertions(+), 5 deletions(-) diff --git a/demos/async_multiple.html b/demos/async_multiple.html index ffcb9db9..11799233 100644 --- a/demos/async_multiple.html +++ b/demos/async_multiple.html @@ -51,7 +51,7 @@

Async loading, multiple instances demo

Stivaletti @@ -60,7 +60,7 @@

Async loading, multiple instances demo

Open toe @@ -69,6 +69,7 @@

Async loading, multiple instances demo

Sneakers & TennisAsync loading, multiple instances demo Sneakers & Tennis shoes basseAsync loading, multiple instances demo Sneakers & Tennis shoes alteAsync loading, multiple instances demo Sneakers & Tennis shoes alteAsync loading, multiple instances demo Sneakers & Tennis shoes basseAsync loading, multiple instances demo Sneakers & Tennis shoes basseAsync loading, multiple instances demo StivaliAsync loading, multiple instances demo StivaliAsync loading, multiple instances demo StivalettiAsync loading, multiple instances demo StivalettiAsync loading, multiple instances demo StivaliAsync loading, multiple instances demo StivalettiAsync loading, multiple instances demo DécolletéAsync loading, multiple instances demo MocassiniAsync loading, multiple instances demo StivalettiAsync loading, multiple instances demo DécolletéAsync loading, multiple instances demo DécolletéAsync loading, multiple instances demo Francesine @@ -235,7 +252,7 @@

Async loading, multiple instances demo

Stivaletti @@ -244,6 +261,7 @@

Async loading, multiple instances demo

DécolletéAsync loading, multiple instances demo MocassiniAsync loading, multiple instances demo MocassiniAsync loading, multiple instances demo StivaliAsync loading, multiple instances demo StivalettiAsync loading, multiple instances demo StivalettiAsync loading, multiple instances demo MocassiniAsync loading, multiple instances demo StivalettiAsync loading, multiple instances demo StivalettiAsync loading, multiple instances demo StivalettiAsync loading, multiple instances demo StivalettiAsync loading, multiple instances demo CuissardesAsync loading, multiple instances demo DécolletéAsync loading, multiple instances demo StivalettiAsync loading, multiple instances demo Sneakers & Tennis shoes basseAsync loading, multiple instances demo MocassiniAsync loading, multiple instances demo Sneakers & Tennis shoes basseAsync loading, multiple instances demo MocassiniAsync loading, multiple instances demo MocassiniAsync loading, multiple instances demo - + ``` Or, with the IntersectionObserver polyfill: ```html - + ``` Then, in your javascript code: @@ -235,7 +235,7 @@ Include RequireJS: Then `require` the AMD version of LazyLoad, like this: ```js -var lazyLoadAmdUrl = "https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.0.0/dist/lazyload.amd.min.js"; +var lazyLoadAmdUrl = "https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.0.1/dist/lazyload.amd.min.js"; var polyfillAmdUrl = "https://cdn.jsdelivr.net/npm/intersection-observer-amd@2.0.1/intersection-observer-amd.js"; /// Dynamically define the dependencies @@ -280,7 +280,7 @@ Then include the script. ```html ``` @@ -314,7 +314,7 @@ Then include the script. ```html ``` diff --git a/dist/lazyload.amd.js b/dist/lazyload.amd.js index 4454247f..ba403149 100644 --- a/dist/lazyload.amd.js +++ b/dist/lazyload.amd.js @@ -104,6 +104,7 @@ define(function () { 'use strict'; var statusLoading = "loading"; var statusLoaded = "loaded"; var statusApplied = "applied"; + var statusEntered = "entered"; var statusError = "error"; var statusNative = "native"; @@ -143,8 +144,9 @@ define(function () { 'use strict'; var hasStatusNative = function hasStatusNative(element) { return getStatus(element) === statusNative; }; + var statusesAfterLoading = [statusLoading, statusLoaded, statusApplied, statusError]; var hadStartedLoading = function hadStartedLoading(element) { - return !hasEmptyStatus(element); + return statusesAfterLoading.indexOf(getStatus(element)) >= 0; }; var safeCallback = function safeCallback(callback, arg1, arg2, arg3) { @@ -201,7 +203,7 @@ define(function () { 'use strict'; var resetObserver = function resetObserver(observer) { observer.disconnect(); }; - var unobserveIfRequired = function unobserveIfRequired(element, settings, instance) { + var unobserveEntered = function unobserveEntered(element, settings, instance) { if (settings.unobserve_entered) unobserve(element, instance); }; @@ -538,7 +540,7 @@ define(function () { 'use strict'; setStatus(element, statusNative); }; - var cancelLoadingIfRequired = function cancelLoadingIfRequired(element, entry, settings, instance) { + var cancelLoading = function cancelLoading(element, entry, settings, instance) { if (!settings.cancel_on_exit) return; if (!hasStatusLoading(element)) return; if (element.tagName !== "IMG") return; //Works only on images @@ -553,8 +555,9 @@ define(function () { 'use strict'; }; var onEnter = function onEnter(element, entry, settings, instance) { + setStatus(element, statusEntered); + unobserveEntered(element, settings, instance); safeCallback(settings.callback_enter, element, entry, instance); - unobserveIfRequired(element, settings, instance); if (hadStartedLoading(element)) return; //Prevent loading it again load(element, settings, instance); @@ -562,7 +565,7 @@ define(function () { 'use strict'; var onExit = function onExit(element, entry, settings, instance) { if (hasEmptyStatus(element)) return; //Ignore the first pass, at landing - cancelLoadingIfRequired(element, entry, settings, instance); + cancelLoading(element, entry, settings, instance); safeCallback(settings.callback_exit, element, entry, instance); }; diff --git a/dist/lazyload.amd.min.js b/dist/lazyload.amd.min.js index a008d25f..2841c4d0 100644 --- a/dist/lazyload.amd.min.js +++ b/dist/lazyload.amd.min.js @@ -1 +1 @@ -define((function(){"use strict";function n(){return(n=Object.assign||function(n){for(var t=1;t1,o={elements_selector:".lazy",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},c=function(t){return n({},o,t)},l=function(n,t){var e,i=new n(t);try{e=new CustomEvent("LazyLoad::Initialized",{detail:{instance:i}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:i})}window.dispatchEvent(e)},s=function(n,t){return n.getAttribute("data-"+t)},u=function(n,t,e){var i="data-"+t;null!==e?n.setAttribute(i,e):n.removeAttribute(i)},d=function(n){return s(n,"ll-status")},f=function(n,t){return u(n,"ll-status",t)},_=function(n){return f(n,null)},g=function(n){return null===d(n)},v=function(n){return"native"===d(n)},b=function(n,t,e,i){n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},p=function(n,t){a?n.classList.add(t):n.className+=(n.className?" ":"")+t},h=function(n,t){a?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},m=function(n){return n.llTempImage},E=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},I=function(n,t){n&&(n.loadingCount+=t)},A=function(n,t){n&&(n.toLoadCount=t)},L=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},w=function(n,t,e){e&&n.setAttribute(t,e)},y=function(n,t){n.removeAttribute(t)},k=function(n){return!!n.llOriginalAttrs},z=function(n){if(!k(n)){var t={};t.src=n.getAttribute("src"),t.srcset=n.getAttribute("srcset"),t.sizes=n.getAttribute("sizes"),n.llOriginalAttrs=t}},O=function(n){if(k(n)){var t=n.llOriginalAttrs;w(n,"src",t.src),w(n,"srcset",t.srcset),w(n,"sizes",t.sizes)}},C=function(n,t){w(n,"sizes",s(n,t.data_sizes)),w(n,"srcset",s(n,t.data_srcset)),w(n,"src",s(n,t.data_src))},N=function(n){y(n,"src"),y(n,"srcset"),y(n,"sizes")},M=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&L(e).forEach(t)},x=function(n,t){L(n).forEach(t)},R={IMG:function(n,t){M(n,(function(n){z(n),C(n,t)})),z(n),C(n,t)},IFRAME:function(n,t){w(n,"src",s(n,t.data_src))},VIDEO:function(n,t){x(n,(function(n){w(n,"src",s(n,t.data_src))})),w(n,"poster",s(n,t.data_poster)),w(n,"src",s(n,t.data_src)),n.load()}},G=function(n,t){var e=R[n.tagName];e&&e(n,t)},T=function(n,t,e){I(e,1),p(n,t.class_loading),f(n,"loading"),b(t.callback_loading,n,e)},D={IMG:function(n,t){u(n,t.data_src,null),u(n,t.data_srcset,null),u(n,t.data_sizes,null),M(n,(function(n){u(n,t.data_srcset,null),u(n,t.data_sizes,null)}))},IFRAME:function(n,t){u(n,t.data_src,null)},VIDEO:function(n,t){u(n,t.data_src,null),u(n,t.data_poster,null),x(n,(function(n){u(n,t.data_src,null)}))}},F=function(n,t){u(n,t.data_bg_multi,null),u(n,t.data_bg_multi_hidpi,null)},V=function(n,t){var e=D[n.tagName];e?e(n,t):function(n,t){u(n,t.data_bg,null),u(n,t.data_bg_hidpi,null)}(n,t)},P=["IMG","IFRAME","VIDEO"],S=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||b(n.callback_finish,t)},j=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},U=function(n,t,e){n.removeEventListener(t,e)},$=function(n){return!!n.llEvLisnrs},q=function(n){if($(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];U(n,e,i)}delete n.llEvLisnrs}},H=function(n,t,e){!function(n){delete n.llTempImage}(n),I(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),h(n,t.class_loading),t.unobserve_completed&&E(n,e)},B=function(n,t,e){var i=m(n)||n;$(i)||function(n,t,e){$(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";j(n,i,t),j(n,"error",e)}(i,(function(a){!function(n,t,e,i){var a=v(t);H(t,e,i),p(t,e.class_loaded),f(t,"loaded"),V(t,e),b(e.callback_loaded,t,i),a||S(e,i)}(0,n,t,e),q(i)}),(function(a){!function(n,t,e,i){var a=v(t);H(t,e,i),p(t,e.class_error),f(t,"error"),b(e.callback_error,t,i),a||S(e,i)}(0,n,t,e),q(i)}))},J=function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),B(n,t,e),function(n,t,e){var i=s(n,t.data_bg),a=s(n,t.data_bg_hidpi),o=r&&a?a:i;o&&(n.style.backgroundImage='url("'.concat(o,'")'),m(n).setAttribute("src",o),T(n,t,e))}(n,t,e),function(n,t,e){var i=s(n,t.data_bg_multi),a=s(n,t.data_bg_multi_hidpi),o=r&&a?a:i;o&&(n.style.backgroundImage=o,function(n,t,e){p(n,t.class_applied),f(n,"applied"),F(n,t),t.unobserve_completed&&E(n,t),b(t.callback_applied,n,e)}(n,t,e))}(n,t,e)},K=function(n,t,e){!function(n){return P.indexOf(n.tagName)>-1}(n)?J(n,t,e):function(n,t,e){B(n,t,e),G(n,t),T(n,t,e)}(n,t,e)},Q=["IMG","IFRAME"],W=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},X=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){b(e.callback_enter,n,t,i),function(n,t,e){t.unobserve_entered&&E(n,e)}(n,e,i),function(n){return!g(n)}(n)||K(n,e,i)}(n.target,n,t,e):function(n,t,e,i){g(n)||(function(n,t,e,i){e.cancel_on_exit&&function(n){return"loading"===d(n)}(n)&&"IMG"===n.tagName&&(q(n),function(n){M(n,(function(n){N(n)})),N(n)}(n),function(n){M(n,(function(n){O(n)})),O(n)}(n),h(n,e.class_loading),I(i,-1),_(n),b(e.callback_cancel,n,t,i))}(n,t,e,i),b(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},Y=function(n){return Array.prototype.slice.call(n)},Z=function(n){return n.container.querySelectorAll(n.elements_selector)},nn=function(n){return function(n){return"error"===d(n)}(n)},tn=function(n,t){return function(n){return Y(n).filter(g)}(n||Z(t))},en=function(n,e){var a=c(n);this._settings=a,this.loadingCount=0,function(n,t){i&&!W(n)&&(t._observer=new IntersectionObserver((function(e){X(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(a,this),function(n,e){t&&window.addEventListener("online",(function(){!function(n,t){var e;(e=Z(n),Y(e).filter(nn)).forEach((function(t){h(t,n.class_error),_(t)})),t.update()}(n,e)}))}(a,this),this.update(e)};return en.prototype={update:function(n){var t,a,r=this._settings,o=tn(n,r);A(this,o.length),!e&&i?W(r)?function(n,t,e){n.forEach((function(n){-1!==Q.indexOf(n.tagName)&&(n.setAttribute("loading","lazy"),function(n,t,e){B(n,t,e),G(n,t),V(n,t),f(n,"native")}(n,t,e))})),A(e,0)}(o,r,this):(a=o,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,a)):this.loadAll(o)},destroy:function(){this._observer&&this._observer.disconnect(),Z(this._settings).forEach((function(n){delete n.llOriginalAttrs})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;tn(n,e).forEach((function(n){K(n,e,t)}))}},en.load=function(n,t){var e=c(t);K(n,e)},en.resetStatus=function(n){_(n)},t&&function(n,t){if(t)if(t.length)for(var e,i=0;e=t[i];i+=1)l(n,e);else l(n,t)}(en,window.lazyLoadOptions),en})); +define((function(){"use strict";function n(){return(n=Object.assign||function(n){for(var t=1;t1,o={elements_selector:".lazy",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},c=function(t){return n({},o,t)},l=function(n,t){var e,i=new n(t);try{e=new CustomEvent("LazyLoad::Initialized",{detail:{instance:i}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:i})}window.dispatchEvent(e)},s=function(n,t){return n.getAttribute("data-"+t)},u=function(n,t,e){var i="data-"+t;null!==e?n.setAttribute(i,e):n.removeAttribute(i)},d=function(n){return s(n,"ll-status")},f=function(n,t){return u(n,"ll-status",t)},_=function(n){return f(n,null)},g=function(n){return null===d(n)},v=function(n){return"native"===d(n)},b=["loading","loaded","applied","error"],p=function(n,t,e,i){n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},h=function(n,t){a?n.classList.add(t):n.className+=(n.className?" ":"")+t},m=function(n,t){a?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},E=function(n){return n.llTempImage},I=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},A=function(n,t){n&&(n.loadingCount+=t)},L=function(n,t){n&&(n.toLoadCount=t)},w=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},y=function(n,t,e){e&&n.setAttribute(t,e)},k=function(n,t){n.removeAttribute(t)},z=function(n){return!!n.llOriginalAttrs},O=function(n){if(!z(n)){var t={};t.src=n.getAttribute("src"),t.srcset=n.getAttribute("srcset"),t.sizes=n.getAttribute("sizes"),n.llOriginalAttrs=t}},C=function(n){if(z(n)){var t=n.llOriginalAttrs;y(n,"src",t.src),y(n,"srcset",t.srcset),y(n,"sizes",t.sizes)}},N=function(n,t){y(n,"sizes",s(n,t.data_sizes)),y(n,"srcset",s(n,t.data_srcset)),y(n,"src",s(n,t.data_src))},M=function(n){k(n,"src"),k(n,"srcset"),k(n,"sizes")},x=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&w(e).forEach(t)},R=function(n,t){w(n).forEach(t)},G={IMG:function(n,t){x(n,(function(n){O(n),N(n,t)})),O(n),N(n,t)},IFRAME:function(n,t){y(n,"src",s(n,t.data_src))},VIDEO:function(n,t){R(n,(function(n){y(n,"src",s(n,t.data_src))})),y(n,"poster",s(n,t.data_poster)),y(n,"src",s(n,t.data_src)),n.load()}},T=function(n,t){var e=G[n.tagName];e&&e(n,t)},D=function(n,t,e){A(e,1),h(n,t.class_loading),f(n,"loading"),p(t.callback_loading,n,e)},F={IMG:function(n,t){u(n,t.data_src,null),u(n,t.data_srcset,null),u(n,t.data_sizes,null),x(n,(function(n){u(n,t.data_srcset,null),u(n,t.data_sizes,null)}))},IFRAME:function(n,t){u(n,t.data_src,null)},VIDEO:function(n,t){u(n,t.data_src,null),u(n,t.data_poster,null),R(n,(function(n){u(n,t.data_src,null)}))}},V=function(n,t){u(n,t.data_bg_multi,null),u(n,t.data_bg_multi_hidpi,null)},P=function(n,t){var e=F[n.tagName];e?e(n,t):function(n,t){u(n,t.data_bg,null),u(n,t.data_bg_hidpi,null)}(n,t)},S=["IMG","IFRAME","VIDEO"],j=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||p(n.callback_finish,t)},U=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},$=function(n,t,e){n.removeEventListener(t,e)},q=function(n){return!!n.llEvLisnrs},H=function(n){if(q(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];$(n,e,i)}delete n.llEvLisnrs}},B=function(n,t,e){!function(n){delete n.llTempImage}(n),A(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),m(n,t.class_loading),t.unobserve_completed&&I(n,e)},J=function(n,t,e){var i=E(n)||n;q(i)||function(n,t,e){q(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";U(n,i,t),U(n,"error",e)}(i,(function(a){!function(n,t,e,i){var a=v(t);B(t,e,i),h(t,e.class_loaded),f(t,"loaded"),P(t,e),p(e.callback_loaded,t,i),a||j(e,i)}(0,n,t,e),H(i)}),(function(a){!function(n,t,e,i){var a=v(t);B(t,e,i),h(t,e.class_error),f(t,"error"),p(e.callback_error,t,i),a||j(e,i)}(0,n,t,e),H(i)}))},K=function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),J(n,t,e),function(n,t,e){var i=s(n,t.data_bg),a=s(n,t.data_bg_hidpi),o=r&&a?a:i;o&&(n.style.backgroundImage='url("'.concat(o,'")'),E(n).setAttribute("src",o),D(n,t,e))}(n,t,e),function(n,t,e){var i=s(n,t.data_bg_multi),a=s(n,t.data_bg_multi_hidpi),o=r&&a?a:i;o&&(n.style.backgroundImage=o,function(n,t,e){h(n,t.class_applied),f(n,"applied"),V(n,t),t.unobserve_completed&&I(n,t),p(t.callback_applied,n,e)}(n,t,e))}(n,t,e)},Q=function(n,t,e){!function(n){return S.indexOf(n.tagName)>-1}(n)?K(n,t,e):function(n,t,e){J(n,t,e),T(n,t),D(n,t,e)}(n,t,e)},W=["IMG","IFRAME"],X=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},Y=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){f(n,"entered"),function(n,t,e){t.unobserve_entered&&I(n,e)}(n,e,i),p(e.callback_enter,n,t,i),function(n){return b.indexOf(d(n))>=0}(n)||Q(n,e,i)}(n.target,n,t,e):function(n,t,e,i){g(n)||(function(n,t,e,i){e.cancel_on_exit&&function(n){return"loading"===d(n)}(n)&&"IMG"===n.tagName&&(H(n),function(n){x(n,(function(n){M(n)})),M(n)}(n),function(n){x(n,(function(n){C(n)})),C(n)}(n),m(n,e.class_loading),A(i,-1),_(n),p(e.callback_cancel,n,t,i))}(n,t,e,i),p(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},Z=function(n){return Array.prototype.slice.call(n)},nn=function(n){return n.container.querySelectorAll(n.elements_selector)},tn=function(n){return function(n){return"error"===d(n)}(n)},en=function(n,t){return function(n){return Z(n).filter(g)}(n||nn(t))},an=function(n,e){var a=c(n);this._settings=a,this.loadingCount=0,function(n,t){i&&!X(n)&&(t._observer=new IntersectionObserver((function(e){Y(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(a,this),function(n,e){t&&window.addEventListener("online",(function(){!function(n,t){var e;(e=nn(n),Z(e).filter(tn)).forEach((function(t){m(t,n.class_error),_(t)})),t.update()}(n,e)}))}(a,this),this.update(e)};return an.prototype={update:function(n){var t,a,r=this._settings,o=en(n,r);L(this,o.length),!e&&i?X(r)?function(n,t,e){n.forEach((function(n){-1!==W.indexOf(n.tagName)&&(n.setAttribute("loading","lazy"),function(n,t,e){J(n,t,e),T(n,t),P(n,t),f(n,"native")}(n,t,e))})),L(e,0)}(o,r,this):(a=o,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,a)):this.loadAll(o)},destroy:function(){this._observer&&this._observer.disconnect(),nn(this._settings).forEach((function(n){delete n.llOriginalAttrs})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;en(n,e).forEach((function(n){Q(n,e,t)}))}},an.load=function(n,t){var e=c(t);Q(n,e)},an.resetStatus=function(n){_(n)},t&&function(n,t){if(t)if(t.length)for(var e,i=0;e=t[i];i+=1)l(n,e);else l(n,t)}(an,window.lazyLoadOptions),an})); diff --git a/dist/lazyload.esm.js b/dist/lazyload.esm.js index 4ebd2f5d..25de5799 100644 --- a/dist/lazyload.esm.js +++ b/dist/lazyload.esm.js @@ -81,6 +81,7 @@ const autoInitialize = (classObj, options) => { const statusLoading = "loading"; const statusLoaded = "loaded"; const statusApplied = "applied"; +const statusEntered = "entered"; const statusError = "error"; const statusNative = "native"; @@ -108,7 +109,9 @@ const hasEmptyStatus = (element) => getStatus(element) === null; const hasStatusLoading = (element) => getStatus(element) === statusLoading; const hasStatusError = (element) => getStatus(element) === statusError; const hasStatusNative = (element) => getStatus(element) === statusNative; -const hadStartedLoading = (element) => !hasEmptyStatus(element); + +const statusesAfterLoading = [statusLoading, statusLoaded, statusApplied, statusError]; +const hadStartedLoading = (element) => (statusesAfterLoading.indexOf(getStatus(element)) >= 0); const safeCallback = (callback, arg1, arg2, arg3) => { if (!callback) { @@ -166,7 +169,7 @@ const resetObserver = (observer) => { observer.disconnect(); }; -const unobserveIfRequired = (element, settings, instance) => { +const unobserveEntered = (element, settings, instance) => { if (settings.unobserve_entered) unobserve(element, instance); }; @@ -517,7 +520,7 @@ const loadNative = (element, settings, instance) => { setStatus(element, statusNative); }; -const cancelLoadingIfRequired = (element, entry, settings, instance) => { +const cancelLoading = (element, entry, settings, instance) => { if (!settings.cancel_on_exit) return; if (!hasStatusLoading(element)) return; if (element.tagName !== "IMG") return; //Works only on images @@ -531,15 +534,16 @@ const cancelLoadingIfRequired = (element, entry, settings, instance) => { }; const onEnter = (element, entry, settings, instance) => { + setStatus(element, statusEntered); + unobserveEntered(element, settings, instance); safeCallback(settings.callback_enter, element, entry, instance); - unobserveIfRequired(element, settings, instance); if (hadStartedLoading(element)) return; //Prevent loading it again load(element, settings, instance); }; const onExit = (element, entry, settings, instance) => { if (hasEmptyStatus(element)) return; //Ignore the first pass, at landing - cancelLoadingIfRequired(element, entry, settings, instance); + cancelLoading(element, entry, settings, instance); safeCallback(settings.callback_exit, element, entry, instance); }; diff --git a/dist/lazyload.esm.min.js b/dist/lazyload.esm.min.js index 1dcaf3cf..a55a76cd 100644 --- a/dist/lazyload.esm.min.js +++ b/dist/lazyload.esm.min.js @@ -1 +1 @@ -const t="undefined"!=typeof window,e=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),a=t&&"IntersectionObserver"in window,l=t&&"classList"in document.createElement("p"),s=t&&window.devicePixelRatio>1,n={elements_selector:".lazy",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},r=t=>Object.assign({},n,t),i=function(t,e){var a;let l=new t(e);try{a=new CustomEvent("LazyLoad::Initialized",{detail:{instance:l}})}catch(t){(a=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:l})}window.dispatchEvent(a)},o=(t,e)=>t.getAttribute("data-"+e),c=(t,e,a)=>{var l="data-"+e;null!==a?t.setAttribute(l,a):t.removeAttribute(l)},d=t=>o(t,"ll-status"),_=(t,e)=>c(t,"ll-status",e),u=t=>_(t,null),g=t=>null===d(t),b=t=>"native"===d(t),p=(t,e,a,l)=>{t&&(void 0===l?void 0===a?t(e):t(e,a):t(e,a,l))},h=(t,e)=>{l?t.classList.add(e):t.className+=(t.className?" ":"")+e},m=(t,e)=>{l?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},v=t=>t.llTempImage,E=(t,e)=>{if(!e)return;const a=e._observer;a&&a.unobserve(t)},f=(t,e)=>{t&&(t.loadingCount+=e)},I=(t,e)=>{t&&(t.toLoadCount=e)},A=t=>{let e=[];for(let a,l=0;a=t.children[l];l+=1)"SOURCE"===a.tagName&&e.push(a);return e},L=(t,e,a)=>{a&&t.setAttribute(e,a)},w=(t,e)=>{t.removeAttribute(e)},k=t=>!!t.llOriginalAttrs,z=t=>{if(k(t))return;const e={};e.src=t.getAttribute("src"),e.srcset=t.getAttribute("srcset"),e.sizes=t.getAttribute("sizes"),t.llOriginalAttrs=e},y=t=>{if(!k(t))return;const e=t.llOriginalAttrs;L(t,"src",e.src),L(t,"srcset",e.srcset),L(t,"sizes",e.sizes)},O=(t,e)=>{L(t,"sizes",o(t,e.data_sizes)),L(t,"srcset",o(t,e.data_srcset)),L(t,"src",o(t,e.data_src))},C=t=>{w(t,"src"),w(t,"srcset"),w(t,"sizes")},N=(t,e)=>{const a=t.parentNode;a&&"PICTURE"===a.tagName&&A(a).forEach(e)},M=(t,e)=>{A(t).forEach(e)},x={IMG:(t,e)=>{N(t,t=>{z(t),O(t,e)}),z(t),O(t,e)},IFRAME:(t,e)=>{L(t,"src",o(t,e.data_src))},VIDEO:(t,e)=>{M(t,t=>{L(t,"src",o(t,e.data_src))}),L(t,"poster",o(t,e.data_poster)),L(t,"src",o(t,e.data_src)),t.load()}},R=(t,e)=>{const a=x[t.tagName];a&&a(t,e)},G=(t,e,a)=>{f(a,1),h(t,e.class_loading),_(t,"loading"),p(e.callback_loading,t,a)},T={IMG:(t,e)=>{c(t,e.data_src,null),c(t,e.data_srcset,null),c(t,e.data_sizes,null),N(t,t=>{c(t,e.data_srcset,null),c(t,e.data_sizes,null)})},IFRAME:(t,e)=>{c(t,e.data_src,null)},VIDEO:(t,e)=>{c(t,e.data_src,null),c(t,e.data_poster,null),M(t,t=>{c(t,e.data_src,null)})}},D=(t,e)=>{c(t,e.data_bg_multi,null),c(t,e.data_bg_multi_hidpi,null)},F=(t,e)=>{const a=T[t.tagName];a?a(t,e):((t,e)=>{c(t,e.data_bg,null),c(t,e.data_bg_hidpi,null)})(t,e)},V=["IMG","IFRAME","VIDEO"],S=(t,e)=>{!e||(t=>t.loadingCount>0)(e)||(t=>t.toLoadCount>0)(e)||p(t.callback_finish,e)},$=(t,e,a)=>{t.addEventListener(e,a),t.llEvLisnrs[e]=a},P=(t,e,a)=>{t.removeEventListener(e,a)},U=t=>!!t.llEvLisnrs,j=t=>{if(!U(t))return;const e=t.llEvLisnrs;for(let a in e){const l=e[a];P(t,a,l)}delete t.llEvLisnrs},q=(t,e,a)=>{(t=>{delete t.llTempImage})(t),f(a,-1),(t=>{t&&(t.toLoadCount-=1)})(a),m(t,e.class_loading),e.unobserve_completed&&E(t,a)},H=(t,e,a)=>{const l=v(t)||t;U(l)||((t,e,a)=>{U(t)||(t.llEvLisnrs={});const l="VIDEO"===t.tagName?"loadeddata":"load";$(t,l,e),$(t,"error",a)})(l,s=>{((t,e,a,l)=>{const s=b(e);q(e,a,l),h(e,a.class_loaded),_(e,"loaded"),F(e,a),p(a.callback_loaded,e,l),s||S(a,l)})(0,t,e,a),j(l)},s=>{((t,e,a,l)=>{const s=b(e);q(e,a,l),h(e,a.class_error),_(e,"error"),p(a.callback_error,e,l),s||S(a,l)})(0,t,e,a),j(l)})},B=(t,e,a)=>{(t=>{t.llTempImage=document.createElement("IMG")})(t),H(t,e,a),((t,e,a)=>{const l=o(t,e.data_bg),n=o(t,e.data_bg_hidpi),r=s&&n?n:l;r&&(t.style.backgroundImage=`url("${r}")`,v(t).setAttribute("src",r),G(t,e,a))})(t,e,a),((t,e,a)=>{const l=o(t,e.data_bg_multi),n=o(t,e.data_bg_multi_hidpi),r=s&&n?n:l;r&&(t.style.backgroundImage=r,((t,e,a)=>{h(t,e.class_applied),_(t,"applied"),D(t,e),e.unobserve_completed&&E(t,e),p(e.callback_applied,t,a)})(t,e,a))})(t,e,a)},J=(t,e,a)=>{(t=>V.indexOf(t.tagName)>-1)(t)?((t,e,a)=>{H(t,e,a),R(t,e),G(t,e,a)})(t,e,a):B(t,e,a)},K=["IMG","IFRAME"],Q=t=>t.use_native&&"loading"in HTMLImageElement.prototype,W=(t,e,a)=>{t.forEach(t=>(t=>t.isIntersecting||t.intersectionRatio>0)(t)?((t,e,a,l)=>{p(a.callback_enter,t,e,l),((t,e,a)=>{e.unobserve_entered&&E(t,a)})(t,a,l),(t=>!g(t))(t)||J(t,a,l)})(t.target,t,e,a):((t,e,a,l)=>{g(t)||(((t,e,a,l)=>{a.cancel_on_exit&&(t=>"loading"===d(t))(t)&&"IMG"===t.tagName&&(j(t),(t=>{N(t,t=>{C(t)}),C(t)})(t),(t=>{N(t,t=>{y(t)}),y(t)})(t),m(t,a.class_loading),f(l,-1),u(t),p(a.callback_cancel,t,e,l))})(t,e,a,l),p(a.callback_exit,t,e,l))})(t.target,t,e,a))},X=t=>Array.prototype.slice.call(t),Y=t=>t.container.querySelectorAll(t.elements_selector),Z=t=>(t=>"error"===d(t))(t),tt=(t,e)=>(t=>X(t).filter(g))(t||Y(e)),et=function(e,l){const s=r(e);this._settings=s,this.loadingCount=0,((t,e)=>{a&&!Q(t)&&(e._observer=new IntersectionObserver(a=>{W(a,t,e)},(t=>({root:t.container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))(t)))})(s,this),((e,a)=>{t&&window.addEventListener("online",()=>{((t,e)=>{var a;(a=Y(t),X(a).filter(Z)).forEach(e=>{m(e,t.class_error),u(e)}),e.update()})(e,a)})})(s,this),this.update(l)};et.prototype={update:function(t){const l=this._settings,s=tt(t,l);var n,r;I(this,s.length),!e&&a?Q(l)?((t,e,a)=>{t.forEach(t=>{-1!==K.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),((t,e,a)=>{H(t,e,a),R(t,e),F(t,e),_(t,"native")})(t,e,a))}),I(a,0)})(s,l,this):(r=s,(t=>{t.disconnect()})(n=this._observer),((t,e)=>{e.forEach(e=>{t.observe(e)})})(n,r)):this.loadAll(s)},destroy:function(){this._observer&&this._observer.disconnect(),Y(this._settings).forEach(t=>{delete t.llOriginalAttrs}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){const e=this._settings;tt(t,e).forEach(t=>{J(t,e,this)})}},et.load=(t,e)=>{const a=r(e);J(t,a)},et.resetStatus=t=>{u(t)},t&&((t,e)=>{if(e)if(e.length)for(let a,l=0;a=e[l];l+=1)i(t,a);else i(t,e)})(et,window.lazyLoadOptions);export default et; +const e="undefined"!=typeof window,t=e&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),a=e&&"IntersectionObserver"in window,l=e&&"classList"in document.createElement("p"),s=e&&window.devicePixelRatio>1,n={elements_selector:".lazy",container:t||e?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},r=e=>Object.assign({},n,e),i=function(e,t){var a;let l=new e(t);try{a=new CustomEvent("LazyLoad::Initialized",{detail:{instance:l}})}catch(e){(a=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:l})}window.dispatchEvent(a)},o=(e,t)=>e.getAttribute("data-"+t),c=(e,t,a)=>{var l="data-"+t;null!==a?e.setAttribute(l,a):e.removeAttribute(l)},d=e=>o(e,"ll-status"),_=(e,t)=>c(e,"ll-status",t),u=e=>_(e,null),g=e=>null===d(e),b=e=>"native"===d(e),p=["loading","loaded","applied","error"],h=(e,t,a,l)=>{e&&(void 0===l?void 0===a?e(t):e(t,a):e(t,a,l))},m=(e,t)=>{l?e.classList.add(t):e.className+=(e.className?" ":"")+t},v=(e,t)=>{l?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},E=e=>e.llTempImage,f=(e,t)=>{if(!t)return;const a=t._observer;a&&a.unobserve(e)},I=(e,t)=>{e&&(e.loadingCount+=t)},A=(e,t)=>{e&&(e.toLoadCount=t)},L=e=>{let t=[];for(let a,l=0;a=e.children[l];l+=1)"SOURCE"===a.tagName&&t.push(a);return t},w=(e,t,a)=>{a&&e.setAttribute(t,a)},k=(e,t)=>{e.removeAttribute(t)},z=e=>!!e.llOriginalAttrs,y=e=>{if(z(e))return;const t={};t.src=e.getAttribute("src"),t.srcset=e.getAttribute("srcset"),t.sizes=e.getAttribute("sizes"),e.llOriginalAttrs=t},O=e=>{if(!z(e))return;const t=e.llOriginalAttrs;w(e,"src",t.src),w(e,"srcset",t.srcset),w(e,"sizes",t.sizes)},C=(e,t)=>{w(e,"sizes",o(e,t.data_sizes)),w(e,"srcset",o(e,t.data_srcset)),w(e,"src",o(e,t.data_src))},N=e=>{k(e,"src"),k(e,"srcset"),k(e,"sizes")},M=(e,t)=>{const a=e.parentNode;a&&"PICTURE"===a.tagName&&L(a).forEach(t)},x=(e,t)=>{L(e).forEach(t)},R={IMG:(e,t)=>{M(e,e=>{y(e),C(e,t)}),y(e),C(e,t)},IFRAME:(e,t)=>{w(e,"src",o(e,t.data_src))},VIDEO:(e,t)=>{x(e,e=>{w(e,"src",o(e,t.data_src))}),w(e,"poster",o(e,t.data_poster)),w(e,"src",o(e,t.data_src)),e.load()}},G=(e,t)=>{const a=R[e.tagName];a&&a(e,t)},T=(e,t,a)=>{I(a,1),m(e,t.class_loading),_(e,"loading"),h(t.callback_loading,e,a)},D={IMG:(e,t)=>{c(e,t.data_src,null),c(e,t.data_srcset,null),c(e,t.data_sizes,null),M(e,e=>{c(e,t.data_srcset,null),c(e,t.data_sizes,null)})},IFRAME:(e,t)=>{c(e,t.data_src,null)},VIDEO:(e,t)=>{c(e,t.data_src,null),c(e,t.data_poster,null),x(e,e=>{c(e,t.data_src,null)})}},F=(e,t)=>{c(e,t.data_bg_multi,null),c(e,t.data_bg_multi_hidpi,null)},V=(e,t)=>{const a=D[e.tagName];a?a(e,t):((e,t)=>{c(e,t.data_bg,null),c(e,t.data_bg_hidpi,null)})(e,t)},S=["IMG","IFRAME","VIDEO"],$=(e,t)=>{!t||(e=>e.loadingCount>0)(t)||(e=>e.toLoadCount>0)(t)||h(e.callback_finish,t)},P=(e,t,a)=>{e.addEventListener(t,a),e.llEvLisnrs[t]=a},U=(e,t,a)=>{e.removeEventListener(t,a)},j=e=>!!e.llEvLisnrs,q=e=>{if(!j(e))return;const t=e.llEvLisnrs;for(let a in t){const l=t[a];U(e,a,l)}delete e.llEvLisnrs},H=(e,t,a)=>{(e=>{delete e.llTempImage})(e),I(a,-1),(e=>{e&&(e.toLoadCount-=1)})(a),v(e,t.class_loading),t.unobserve_completed&&f(e,a)},B=(e,t,a)=>{const l=E(e)||e;j(l)||((e,t,a)=>{j(e)||(e.llEvLisnrs={});const l="VIDEO"===e.tagName?"loadeddata":"load";P(e,l,t),P(e,"error",a)})(l,s=>{((e,t,a,l)=>{const s=b(t);H(t,a,l),m(t,a.class_loaded),_(t,"loaded"),V(t,a),h(a.callback_loaded,t,l),s||$(a,l)})(0,e,t,a),q(l)},s=>{((e,t,a,l)=>{const s=b(t);H(t,a,l),m(t,a.class_error),_(t,"error"),h(a.callback_error,t,l),s||$(a,l)})(0,e,t,a),q(l)})},J=(e,t,a)=>{(e=>{e.llTempImage=document.createElement("IMG")})(e),B(e,t,a),((e,t,a)=>{const l=o(e,t.data_bg),n=o(e,t.data_bg_hidpi),r=s&&n?n:l;r&&(e.style.backgroundImage=`url("${r}")`,E(e).setAttribute("src",r),T(e,t,a))})(e,t,a),((e,t,a)=>{const l=o(e,t.data_bg_multi),n=o(e,t.data_bg_multi_hidpi),r=s&&n?n:l;r&&(e.style.backgroundImage=r,((e,t,a)=>{m(e,t.class_applied),_(e,"applied"),F(e,t),t.unobserve_completed&&f(e,t),h(t.callback_applied,e,a)})(e,t,a))})(e,t,a)},K=(e,t,a)=>{(e=>S.indexOf(e.tagName)>-1)(e)?((e,t,a)=>{B(e,t,a),G(e,t),T(e,t,a)})(e,t,a):J(e,t,a)},Q=["IMG","IFRAME"],W=e=>e.use_native&&"loading"in HTMLImageElement.prototype,X=(e,t,a)=>{e.forEach(e=>(e=>e.isIntersecting||e.intersectionRatio>0)(e)?((e,t,a,l)=>{_(e,"entered"),((e,t,a)=>{t.unobserve_entered&&f(e,a)})(e,a,l),h(a.callback_enter,e,t,l),(e=>p.indexOf(d(e))>=0)(e)||K(e,a,l)})(e.target,e,t,a):((e,t,a,l)=>{g(e)||(((e,t,a,l)=>{a.cancel_on_exit&&(e=>"loading"===d(e))(e)&&"IMG"===e.tagName&&(q(e),(e=>{M(e,e=>{N(e)}),N(e)})(e),(e=>{M(e,e=>{O(e)}),O(e)})(e),v(e,a.class_loading),I(l,-1),u(e),h(a.callback_cancel,e,t,l))})(e,t,a,l),h(a.callback_exit,e,t,l))})(e.target,e,t,a))},Y=e=>Array.prototype.slice.call(e),Z=e=>e.container.querySelectorAll(e.elements_selector),ee=e=>(e=>"error"===d(e))(e),te=(e,t)=>(e=>Y(e).filter(g))(e||Z(t)),ae=function(t,l){const s=r(t);this._settings=s,this.loadingCount=0,((e,t)=>{a&&!W(e)&&(t._observer=new IntersectionObserver(a=>{X(a,e,t)},(e=>({root:e.container===document?null:e.container,rootMargin:e.thresholds||e.threshold+"px"}))(e)))})(s,this),((t,a)=>{e&&window.addEventListener("online",()=>{((e,t)=>{var a;(a=Z(e),Y(a).filter(ee)).forEach(t=>{v(t,e.class_error),u(t)}),t.update()})(t,a)})})(s,this),this.update(l)};ae.prototype={update:function(e){const l=this._settings,s=te(e,l);var n,r;A(this,s.length),!t&&a?W(l)?((e,t,a)=>{e.forEach(e=>{-1!==Q.indexOf(e.tagName)&&(e.setAttribute("loading","lazy"),((e,t,a)=>{B(e,t,a),G(e,t),V(e,t),_(e,"native")})(e,t,a))}),A(a,0)})(s,l,this):(r=s,(e=>{e.disconnect()})(n=this._observer),((e,t)=>{t.forEach(t=>{e.observe(t)})})(n,r)):this.loadAll(s)},destroy:function(){this._observer&&this._observer.disconnect(),Z(this._settings).forEach(e=>{delete e.llOriginalAttrs}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(e){const t=this._settings;te(e,t).forEach(e=>{K(e,t,this)})}},ae.load=(e,t)=>{const a=r(t);K(e,a)},ae.resetStatus=e=>{u(e)},e&&((e,t)=>{if(t)if(t.length)for(let a,l=0;a=t[l];l+=1)i(e,a);else i(e,t)})(ae,window.lazyLoadOptions);export default ae; diff --git a/dist/lazyload.iife.js b/dist/lazyload.iife.js index 0aeee65e..467cee9e 100644 --- a/dist/lazyload.iife.js +++ b/dist/lazyload.iife.js @@ -105,6 +105,7 @@ var LazyLoad = (function () { var statusLoading = "loading"; var statusLoaded = "loaded"; var statusApplied = "applied"; + var statusEntered = "entered"; var statusError = "error"; var statusNative = "native"; @@ -144,8 +145,9 @@ var LazyLoad = (function () { var hasStatusNative = function hasStatusNative(element) { return getStatus(element) === statusNative; }; + var statusesAfterLoading = [statusLoading, statusLoaded, statusApplied, statusError]; var hadStartedLoading = function hadStartedLoading(element) { - return !hasEmptyStatus(element); + return statusesAfterLoading.indexOf(getStatus(element)) >= 0; }; var safeCallback = function safeCallback(callback, arg1, arg2, arg3) { @@ -202,7 +204,7 @@ var LazyLoad = (function () { var resetObserver = function resetObserver(observer) { observer.disconnect(); }; - var unobserveIfRequired = function unobserveIfRequired(element, settings, instance) { + var unobserveEntered = function unobserveEntered(element, settings, instance) { if (settings.unobserve_entered) unobserve(element, instance); }; @@ -539,7 +541,7 @@ var LazyLoad = (function () { setStatus(element, statusNative); }; - var cancelLoadingIfRequired = function cancelLoadingIfRequired(element, entry, settings, instance) { + var cancelLoading = function cancelLoading(element, entry, settings, instance) { if (!settings.cancel_on_exit) return; if (!hasStatusLoading(element)) return; if (element.tagName !== "IMG") return; //Works only on images @@ -554,8 +556,9 @@ var LazyLoad = (function () { }; var onEnter = function onEnter(element, entry, settings, instance) { + setStatus(element, statusEntered); + unobserveEntered(element, settings, instance); safeCallback(settings.callback_enter, element, entry, instance); - unobserveIfRequired(element, settings, instance); if (hadStartedLoading(element)) return; //Prevent loading it again load(element, settings, instance); @@ -563,7 +566,7 @@ var LazyLoad = (function () { var onExit = function onExit(element, entry, settings, instance) { if (hasEmptyStatus(element)) return; //Ignore the first pass, at landing - cancelLoadingIfRequired(element, entry, settings, instance); + cancelLoading(element, entry, settings, instance); safeCallback(settings.callback_exit, element, entry, instance); }; diff --git a/dist/lazyload.iife.min.js b/dist/lazyload.iife.min.js index f8d4b33b..db3bbba9 100644 --- a/dist/lazyload.iife.min.js +++ b/dist/lazyload.iife.min.js @@ -1 +1 @@ -var LazyLoad=function(){"use strict";function t(){return(t=Object.assign||function(t){for(var n=1;n1,o={elements_selector:".lazy",container:e||n?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},c=function(n){return t({},o,n)},l=function(t,n){var e,i=new t(n);try{e=new CustomEvent("LazyLoad::Initialized",{detail:{instance:i}})}catch(t){(e=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:i})}window.dispatchEvent(e)},s=function(t,n){return t.getAttribute("data-"+n)},u=function(t,n,e){var i="data-"+n;null!==e?t.setAttribute(i,e):t.removeAttribute(i)},d=function(t){return s(t,"ll-status")},f=function(t,n){return u(t,"ll-status",n)},_=function(t){return f(t,null)},g=function(t){return null===d(t)},v=function(t){return"native"===d(t)},b=function(t,n,e,i){t&&(void 0===i?void 0===e?t(n):t(n,e):t(n,e,i))},p=function(t,n){a?t.classList.add(n):t.className+=(t.className?" ":"")+n},h=function(t,n){a?t.classList.remove(n):t.className=t.className.replace(new RegExp("(^|\\s+)"+n+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},m=function(t){return t.llTempImage},E=function(t,n){if(n){var e=n._observer;e&&e.unobserve(t)}},I=function(t,n){t&&(t.loadingCount+=n)},A=function(t,n){t&&(t.toLoadCount=n)},L=function(t){for(var n,e=[],i=0;n=t.children[i];i+=1)"SOURCE"===n.tagName&&e.push(n);return e},w=function(t,n,e){e&&t.setAttribute(n,e)},y=function(t,n){t.removeAttribute(n)},z=function(t){return!!t.llOriginalAttrs},k=function(t){if(!z(t)){var n={};n.src=t.getAttribute("src"),n.srcset=t.getAttribute("srcset"),n.sizes=t.getAttribute("sizes"),t.llOriginalAttrs=n}},O=function(t){if(z(t)){var n=t.llOriginalAttrs;w(t,"src",n.src),w(t,"srcset",n.srcset),w(t,"sizes",n.sizes)}},C=function(t,n){w(t,"sizes",s(t,n.data_sizes)),w(t,"srcset",s(t,n.data_srcset)),w(t,"src",s(t,n.data_src))},N=function(t){y(t,"src"),y(t,"srcset"),y(t,"sizes")},M=function(t,n){var e=t.parentNode;e&&"PICTURE"===e.tagName&&L(e).forEach(n)},x=function(t,n){L(t).forEach(n)},R={IMG:function(t,n){M(t,(function(t){k(t),C(t,n)})),k(t),C(t,n)},IFRAME:function(t,n){w(t,"src",s(t,n.data_src))},VIDEO:function(t,n){x(t,(function(t){w(t,"src",s(t,n.data_src))})),w(t,"poster",s(t,n.data_poster)),w(t,"src",s(t,n.data_src)),t.load()}},G=function(t,n){var e=R[t.tagName];e&&e(t,n)},T=function(t,n,e){I(e,1),p(t,n.class_loading),f(t,"loading"),b(n.callback_loading,t,e)},D={IMG:function(t,n){u(t,n.data_src,null),u(t,n.data_srcset,null),u(t,n.data_sizes,null),M(t,(function(t){u(t,n.data_srcset,null),u(t,n.data_sizes,null)}))},IFRAME:function(t,n){u(t,n.data_src,null)},VIDEO:function(t,n){u(t,n.data_src,null),u(t,n.data_poster,null),x(t,(function(t){u(t,n.data_src,null)}))}},F=function(t,n){u(t,n.data_bg_multi,null),u(t,n.data_bg_multi_hidpi,null)},V=function(t,n){var e=D[t.tagName];e?e(t,n):function(t,n){u(t,n.data_bg,null),u(t,n.data_bg_hidpi,null)}(t,n)},P=["IMG","IFRAME","VIDEO"],S=function(t,n){!n||function(t){return t.loadingCount>0}(n)||function(t){return t.toLoadCount>0}(n)||b(t.callback_finish,n)},j=function(t,n,e){t.addEventListener(n,e),t.llEvLisnrs[n]=e},U=function(t,n,e){t.removeEventListener(n,e)},$=function(t){return!!t.llEvLisnrs},q=function(t){if($(t)){var n=t.llEvLisnrs;for(var e in n){var i=n[e];U(t,e,i)}delete t.llEvLisnrs}},H=function(t,n,e){!function(t){delete t.llTempImage}(t),I(e,-1),function(t){t&&(t.toLoadCount-=1)}(e),h(t,n.class_loading),n.unobserve_completed&&E(t,e)},B=function(t,n,e){var i=m(t)||t;$(i)||function(t,n,e){$(t)||(t.llEvLisnrs={});var i="VIDEO"===t.tagName?"loadeddata":"load";j(t,i,n),j(t,"error",e)}(i,(function(a){!function(t,n,e,i){var a=v(n);H(n,e,i),p(n,e.class_loaded),f(n,"loaded"),V(n,e),b(e.callback_loaded,n,i),a||S(e,i)}(0,t,n,e),q(i)}),(function(a){!function(t,n,e,i){var a=v(n);H(n,e,i),p(n,e.class_error),f(n,"error"),b(e.callback_error,n,i),a||S(e,i)}(0,t,n,e),q(i)}))},J=function(t,n,e){!function(t){t.llTempImage=document.createElement("IMG")}(t),B(t,n,e),function(t,n,e){var i=s(t,n.data_bg),a=s(t,n.data_bg_hidpi),o=r&&a?a:i;o&&(t.style.backgroundImage='url("'.concat(o,'")'),m(t).setAttribute("src",o),T(t,n,e))}(t,n,e),function(t,n,e){var i=s(t,n.data_bg_multi),a=s(t,n.data_bg_multi_hidpi),o=r&&a?a:i;o&&(t.style.backgroundImage=o,function(t,n,e){p(t,n.class_applied),f(t,"applied"),F(t,n),n.unobserve_completed&&E(t,n),b(n.callback_applied,t,e)}(t,n,e))}(t,n,e)},K=function(t,n,e){!function(t){return P.indexOf(t.tagName)>-1}(t)?J(t,n,e):function(t,n,e){B(t,n,e),G(t,n),T(t,n,e)}(t,n,e)},Q=["IMG","IFRAME"],W=function(t){return t.use_native&&"loading"in HTMLImageElement.prototype},X=function(t,n,e){t.forEach((function(t){return function(t){return t.isIntersecting||t.intersectionRatio>0}(t)?function(t,n,e,i){b(e.callback_enter,t,n,i),function(t,n,e){n.unobserve_entered&&E(t,e)}(t,e,i),function(t){return!g(t)}(t)||K(t,e,i)}(t.target,t,n,e):function(t,n,e,i){g(t)||(function(t,n,e,i){e.cancel_on_exit&&function(t){return"loading"===d(t)}(t)&&"IMG"===t.tagName&&(q(t),function(t){M(t,(function(t){N(t)})),N(t)}(t),function(t){M(t,(function(t){O(t)})),O(t)}(t),h(t,e.class_loading),I(i,-1),_(t),b(e.callback_cancel,t,n,i))}(t,n,e,i),b(e.callback_exit,t,n,i))}(t.target,t,n,e)}))},Y=function(t){return Array.prototype.slice.call(t)},Z=function(t){return t.container.querySelectorAll(t.elements_selector)},tt=function(t){return function(t){return"error"===d(t)}(t)},nt=function(t,n){return function(t){return Y(t).filter(g)}(t||Z(n))},et=function(t,e){var a=c(t);this._settings=a,this.loadingCount=0,function(t,n){i&&!W(t)&&(n._observer=new IntersectionObserver((function(e){X(e,t,n)}),function(t){return{root:t.container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}}(t)))}(a,this),function(t,e){n&&window.addEventListener("online",(function(){!function(t,n){var e;(e=Z(t),Y(e).filter(tt)).forEach((function(n){h(n,t.class_error),_(n)})),n.update()}(t,e)}))}(a,this),this.update(e)};return et.prototype={update:function(t){var n,a,r=this._settings,o=nt(t,r);A(this,o.length),!e&&i?W(r)?function(t,n,e){t.forEach((function(t){-1!==Q.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),function(t,n,e){B(t,n,e),G(t,n),V(t,n),f(t,"native")}(t,n,e))})),A(e,0)}(o,r,this):(a=o,function(t){t.disconnect()}(n=this._observer),function(t,n){n.forEach((function(n){t.observe(n)}))}(n,a)):this.loadAll(o)},destroy:function(){this._observer&&this._observer.disconnect(),Z(this._settings).forEach((function(t){delete t.llOriginalAttrs})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var n=this,e=this._settings;nt(t,e).forEach((function(t){K(t,e,n)}))}},et.load=function(t,n){var e=c(n);K(t,e)},et.resetStatus=function(t){_(t)},n&&function(t,n){if(n)if(n.length)for(var e,i=0;e=n[i];i+=1)l(t,e);else l(t,n)}(et,window.lazyLoadOptions),et}(); +var LazyLoad=function(){"use strict";function n(){return(n=Object.assign||function(n){for(var t=1;t1,o={elements_selector:".lazy",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},c=function(t){return n({},o,t)},l=function(n,t){var e,i=new n(t);try{e=new CustomEvent("LazyLoad::Initialized",{detail:{instance:i}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:i})}window.dispatchEvent(e)},s=function(n,t){return n.getAttribute("data-"+t)},u=function(n,t,e){var i="data-"+t;null!==e?n.setAttribute(i,e):n.removeAttribute(i)},d=function(n){return s(n,"ll-status")},f=function(n,t){return u(n,"ll-status",t)},_=function(n){return f(n,null)},g=function(n){return null===d(n)},v=function(n){return"native"===d(n)},b=["loading","loaded","applied","error"],p=function(n,t,e,i){n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},h=function(n,t){a?n.classList.add(t):n.className+=(n.className?" ":"")+t},m=function(n,t){a?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},E=function(n){return n.llTempImage},I=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},A=function(n,t){n&&(n.loadingCount+=t)},L=function(n,t){n&&(n.toLoadCount=t)},w=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},y=function(n,t,e){e&&n.setAttribute(t,e)},z=function(n,t){n.removeAttribute(t)},k=function(n){return!!n.llOriginalAttrs},O=function(n){if(!k(n)){var t={};t.src=n.getAttribute("src"),t.srcset=n.getAttribute("srcset"),t.sizes=n.getAttribute("sizes"),n.llOriginalAttrs=t}},C=function(n){if(k(n)){var t=n.llOriginalAttrs;y(n,"src",t.src),y(n,"srcset",t.srcset),y(n,"sizes",t.sizes)}},N=function(n,t){y(n,"sizes",s(n,t.data_sizes)),y(n,"srcset",s(n,t.data_srcset)),y(n,"src",s(n,t.data_src))},M=function(n){z(n,"src"),z(n,"srcset"),z(n,"sizes")},x=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&w(e).forEach(t)},R=function(n,t){w(n).forEach(t)},G={IMG:function(n,t){x(n,(function(n){O(n),N(n,t)})),O(n),N(n,t)},IFRAME:function(n,t){y(n,"src",s(n,t.data_src))},VIDEO:function(n,t){R(n,(function(n){y(n,"src",s(n,t.data_src))})),y(n,"poster",s(n,t.data_poster)),y(n,"src",s(n,t.data_src)),n.load()}},T=function(n,t){var e=G[n.tagName];e&&e(n,t)},D=function(n,t,e){A(e,1),h(n,t.class_loading),f(n,"loading"),p(t.callback_loading,n,e)},F={IMG:function(n,t){u(n,t.data_src,null),u(n,t.data_srcset,null),u(n,t.data_sizes,null),x(n,(function(n){u(n,t.data_srcset,null),u(n,t.data_sizes,null)}))},IFRAME:function(n,t){u(n,t.data_src,null)},VIDEO:function(n,t){u(n,t.data_src,null),u(n,t.data_poster,null),R(n,(function(n){u(n,t.data_src,null)}))}},V=function(n,t){u(n,t.data_bg_multi,null),u(n,t.data_bg_multi_hidpi,null)},P=function(n,t){var e=F[n.tagName];e?e(n,t):function(n,t){u(n,t.data_bg,null),u(n,t.data_bg_hidpi,null)}(n,t)},S=["IMG","IFRAME","VIDEO"],j=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||p(n.callback_finish,t)},U=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},$=function(n,t,e){n.removeEventListener(t,e)},q=function(n){return!!n.llEvLisnrs},H=function(n){if(q(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];$(n,e,i)}delete n.llEvLisnrs}},B=function(n,t,e){!function(n){delete n.llTempImage}(n),A(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),m(n,t.class_loading),t.unobserve_completed&&I(n,e)},J=function(n,t,e){var i=E(n)||n;q(i)||function(n,t,e){q(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";U(n,i,t),U(n,"error",e)}(i,(function(a){!function(n,t,e,i){var a=v(t);B(t,e,i),h(t,e.class_loaded),f(t,"loaded"),P(t,e),p(e.callback_loaded,t,i),a||j(e,i)}(0,n,t,e),H(i)}),(function(a){!function(n,t,e,i){var a=v(t);B(t,e,i),h(t,e.class_error),f(t,"error"),p(e.callback_error,t,i),a||j(e,i)}(0,n,t,e),H(i)}))},K=function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),J(n,t,e),function(n,t,e){var i=s(n,t.data_bg),a=s(n,t.data_bg_hidpi),o=r&&a?a:i;o&&(n.style.backgroundImage='url("'.concat(o,'")'),E(n).setAttribute("src",o),D(n,t,e))}(n,t,e),function(n,t,e){var i=s(n,t.data_bg_multi),a=s(n,t.data_bg_multi_hidpi),o=r&&a?a:i;o&&(n.style.backgroundImage=o,function(n,t,e){h(n,t.class_applied),f(n,"applied"),V(n,t),t.unobserve_completed&&I(n,t),p(t.callback_applied,n,e)}(n,t,e))}(n,t,e)},Q=function(n,t,e){!function(n){return S.indexOf(n.tagName)>-1}(n)?K(n,t,e):function(n,t,e){J(n,t,e),T(n,t),D(n,t,e)}(n,t,e)},W=["IMG","IFRAME"],X=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},Y=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){f(n,"entered"),function(n,t,e){t.unobserve_entered&&I(n,e)}(n,e,i),p(e.callback_enter,n,t,i),function(n){return b.indexOf(d(n))>=0}(n)||Q(n,e,i)}(n.target,n,t,e):function(n,t,e,i){g(n)||(function(n,t,e,i){e.cancel_on_exit&&function(n){return"loading"===d(n)}(n)&&"IMG"===n.tagName&&(H(n),function(n){x(n,(function(n){M(n)})),M(n)}(n),function(n){x(n,(function(n){C(n)})),C(n)}(n),m(n,e.class_loading),A(i,-1),_(n),p(e.callback_cancel,n,t,i))}(n,t,e,i),p(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},Z=function(n){return Array.prototype.slice.call(n)},nn=function(n){return n.container.querySelectorAll(n.elements_selector)},tn=function(n){return function(n){return"error"===d(n)}(n)},en=function(n,t){return function(n){return Z(n).filter(g)}(n||nn(t))},an=function(n,e){var a=c(n);this._settings=a,this.loadingCount=0,function(n,t){i&&!X(n)&&(t._observer=new IntersectionObserver((function(e){Y(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(a,this),function(n,e){t&&window.addEventListener("online",(function(){!function(n,t){var e;(e=nn(n),Z(e).filter(tn)).forEach((function(t){m(t,n.class_error),_(t)})),t.update()}(n,e)}))}(a,this),this.update(e)};return an.prototype={update:function(n){var t,a,r=this._settings,o=en(n,r);L(this,o.length),!e&&i?X(r)?function(n,t,e){n.forEach((function(n){-1!==W.indexOf(n.tagName)&&(n.setAttribute("loading","lazy"),function(n,t,e){J(n,t,e),T(n,t),P(n,t),f(n,"native")}(n,t,e))})),L(e,0)}(o,r,this):(a=o,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,a)):this.loadAll(o)},destroy:function(){this._observer&&this._observer.disconnect(),nn(this._settings).forEach((function(n){delete n.llOriginalAttrs})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;en(n,e).forEach((function(n){Q(n,e,t)}))}},an.load=function(n,t){var e=c(t);Q(n,e)},an.resetStatus=function(n){_(n)},t&&function(n,t){if(t)if(t.length)for(var e,i=0;e=t[i];i+=1)l(n,e);else l(n,t)}(an,window.lazyLoadOptions),an}(); diff --git a/dist/lazyload.js b/dist/lazyload.js index 3484b405..aa21a9b2 100644 --- a/dist/lazyload.js +++ b/dist/lazyload.js @@ -108,6 +108,7 @@ var statusLoading = "loading"; var statusLoaded = "loaded"; var statusApplied = "applied"; + var statusEntered = "entered"; var statusError = "error"; var statusNative = "native"; @@ -147,8 +148,9 @@ var hasStatusNative = function hasStatusNative(element) { return getStatus(element) === statusNative; }; + var statusesAfterLoading = [statusLoading, statusLoaded, statusApplied, statusError]; var hadStartedLoading = function hadStartedLoading(element) { - return !hasEmptyStatus(element); + return statusesAfterLoading.indexOf(getStatus(element)) >= 0; }; var safeCallback = function safeCallback(callback, arg1, arg2, arg3) { @@ -205,7 +207,7 @@ var resetObserver = function resetObserver(observer) { observer.disconnect(); }; - var unobserveIfRequired = function unobserveIfRequired(element, settings, instance) { + var unobserveEntered = function unobserveEntered(element, settings, instance) { if (settings.unobserve_entered) unobserve(element, instance); }; @@ -542,7 +544,7 @@ setStatus(element, statusNative); }; - var cancelLoadingIfRequired = function cancelLoadingIfRequired(element, entry, settings, instance) { + var cancelLoading = function cancelLoading(element, entry, settings, instance) { if (!settings.cancel_on_exit) return; if (!hasStatusLoading(element)) return; if (element.tagName !== "IMG") return; //Works only on images @@ -557,8 +559,9 @@ }; var onEnter = function onEnter(element, entry, settings, instance) { + setStatus(element, statusEntered); + unobserveEntered(element, settings, instance); safeCallback(settings.callback_enter, element, entry, instance); - unobserveIfRequired(element, settings, instance); if (hadStartedLoading(element)) return; //Prevent loading it again load(element, settings, instance); @@ -566,7 +569,7 @@ var onExit = function onExit(element, entry, settings, instance) { if (hasEmptyStatus(element)) return; //Ignore the first pass, at landing - cancelLoadingIfRequired(element, entry, settings, instance); + cancelLoading(element, entry, settings, instance); safeCallback(settings.callback_exit, element, entry, instance); }; diff --git a/dist/lazyload.min.js b/dist/lazyload.min.js index 62b1236a..6d4a4046 100644 --- a/dist/lazyload.min.js +++ b/dist/lazyload.min.js @@ -1 +1 @@ -!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t=t||self).LazyLoad=n()}(this,(function(){"use strict";function t(){return(t=Object.assign||function(t){for(var n=1;n1,r={elements_selector:".lazy",container:e||n?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},c=function(n){return t({},r,n)},l=function(t,n){var e,i=new t(n);try{e=new CustomEvent("LazyLoad::Initialized",{detail:{instance:i}})}catch(t){(e=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:i})}window.dispatchEvent(e)},s=function(t,n){return t.getAttribute("data-"+n)},u=function(t,n,e){var i="data-"+n;null!==e?t.setAttribute(i,e):t.removeAttribute(i)},d=function(t){return s(t,"ll-status")},f=function(t,n){return u(t,"ll-status",n)},_=function(t){return f(t,null)},g=function(t){return null===d(t)},v=function(t){return"native"===d(t)},b=function(t,n,e,i){t&&(void 0===i?void 0===e?t(n):t(n,e):t(n,e,i))},p=function(t,n){a?t.classList.add(n):t.className+=(t.className?" ":"")+n},h=function(t,n){a?t.classList.remove(n):t.className=t.className.replace(new RegExp("(^|\\s+)"+n+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},m=function(t){return t.llTempImage},E=function(t,n){if(n){var e=n._observer;e&&e.unobserve(t)}},I=function(t,n){t&&(t.loadingCount+=n)},y=function(t,n){t&&(t.toLoadCount=n)},A=function(t){for(var n,e=[],i=0;n=t.children[i];i+=1)"SOURCE"===n.tagName&&e.push(n);return e},L=function(t,n,e){e&&t.setAttribute(n,e)},w=function(t,n){t.removeAttribute(n)},z=function(t){return!!t.llOriginalAttrs},k=function(t){if(!z(t)){var n={};n.src=t.getAttribute("src"),n.srcset=t.getAttribute("srcset"),n.sizes=t.getAttribute("sizes"),t.llOriginalAttrs=n}},O=function(t){if(z(t)){var n=t.llOriginalAttrs;L(t,"src",n.src),L(t,"srcset",n.srcset),L(t,"sizes",n.sizes)}},C=function(t,n){L(t,"sizes",s(t,n.data_sizes)),L(t,"srcset",s(t,n.data_srcset)),L(t,"src",s(t,n.data_src))},N=function(t){w(t,"src"),w(t,"srcset"),w(t,"sizes")},M=function(t,n){var e=t.parentNode;e&&"PICTURE"===e.tagName&&A(e).forEach(n)},x=function(t,n){A(t).forEach(n)},R={IMG:function(t,n){M(t,(function(t){k(t),C(t,n)})),k(t),C(t,n)},IFRAME:function(t,n){L(t,"src",s(t,n.data_src))},VIDEO:function(t,n){x(t,(function(t){L(t,"src",s(t,n.data_src))})),L(t,"poster",s(t,n.data_poster)),L(t,"src",s(t,n.data_src)),t.load()}},G=function(t,n){var e=R[t.tagName];e&&e(t,n)},T=function(t,n,e){I(e,1),p(t,n.class_loading),f(t,"loading"),b(n.callback_loading,t,e)},D={IMG:function(t,n){u(t,n.data_src,null),u(t,n.data_srcset,null),u(t,n.data_sizes,null),M(t,(function(t){u(t,n.data_srcset,null),u(t,n.data_sizes,null)}))},IFRAME:function(t,n){u(t,n.data_src,null)},VIDEO:function(t,n){u(t,n.data_src,null),u(t,n.data_poster,null),x(t,(function(t){u(t,n.data_src,null)}))}},F=function(t,n){u(t,n.data_bg_multi,null),u(t,n.data_bg_multi_hidpi,null)},V=function(t,n){var e=D[t.tagName];e?e(t,n):function(t,n){u(t,n.data_bg,null),u(t,n.data_bg_hidpi,null)}(t,n)},j=["IMG","IFRAME","VIDEO"],P=function(t,n){!n||function(t){return t.loadingCount>0}(n)||function(t){return t.toLoadCount>0}(n)||b(t.callback_finish,n)},S=function(t,n,e){t.addEventListener(n,e),t.llEvLisnrs[n]=e},U=function(t,n,e){t.removeEventListener(n,e)},$=function(t){return!!t.llEvLisnrs},q=function(t){if($(t)){var n=t.llEvLisnrs;for(var e in n){var i=n[e];U(t,e,i)}delete t.llEvLisnrs}},H=function(t,n,e){!function(t){delete t.llTempImage}(t),I(e,-1),function(t){t&&(t.toLoadCount-=1)}(e),h(t,n.class_loading),n.unobserve_completed&&E(t,e)},B=function(t,n,e){var i=m(t)||t;$(i)||function(t,n,e){$(t)||(t.llEvLisnrs={});var i="VIDEO"===t.tagName?"loadeddata":"load";S(t,i,n),S(t,"error",e)}(i,(function(a){!function(t,n,e,i){var a=v(n);H(n,e,i),p(n,e.class_loaded),f(n,"loaded"),V(n,e),b(e.callback_loaded,n,i),a||P(e,i)}(0,t,n,e),q(i)}),(function(a){!function(t,n,e,i){var a=v(n);H(n,e,i),p(n,e.class_error),f(n,"error"),b(e.callback_error,n,i),a||P(e,i)}(0,t,n,e),q(i)}))},J=function(t,n,e){!function(t){t.llTempImage=document.createElement("IMG")}(t),B(t,n,e),function(t,n,e){var i=s(t,n.data_bg),a=s(t,n.data_bg_hidpi),r=o&&a?a:i;r&&(t.style.backgroundImage='url("'.concat(r,'")'),m(t).setAttribute("src",r),T(t,n,e))}(t,n,e),function(t,n,e){var i=s(t,n.data_bg_multi),a=s(t,n.data_bg_multi_hidpi),r=o&&a?a:i;r&&(t.style.backgroundImage=r,function(t,n,e){p(t,n.class_applied),f(t,"applied"),F(t,n),n.unobserve_completed&&E(t,n),b(n.callback_applied,t,e)}(t,n,e))}(t,n,e)},K=function(t,n,e){!function(t){return j.indexOf(t.tagName)>-1}(t)?J(t,n,e):function(t,n,e){B(t,n,e),G(t,n),T(t,n,e)}(t,n,e)},Q=["IMG","IFRAME"],W=function(t){return t.use_native&&"loading"in HTMLImageElement.prototype},X=function(t,n,e){t.forEach((function(t){return function(t){return t.isIntersecting||t.intersectionRatio>0}(t)?function(t,n,e,i){b(e.callback_enter,t,n,i),function(t,n,e){n.unobserve_entered&&E(t,e)}(t,e,i),function(t){return!g(t)}(t)||K(t,e,i)}(t.target,t,n,e):function(t,n,e,i){g(t)||(function(t,n,e,i){e.cancel_on_exit&&function(t){return"loading"===d(t)}(t)&&"IMG"===t.tagName&&(q(t),function(t){M(t,(function(t){N(t)})),N(t)}(t),function(t){M(t,(function(t){O(t)})),O(t)}(t),h(t,e.class_loading),I(i,-1),_(t),b(e.callback_cancel,t,n,i))}(t,n,e,i),b(e.callback_exit,t,n,i))}(t.target,t,n,e)}))},Y=function(t){return Array.prototype.slice.call(t)},Z=function(t){return t.container.querySelectorAll(t.elements_selector)},tt=function(t){return function(t){return"error"===d(t)}(t)},nt=function(t,n){return function(t){return Y(t).filter(g)}(t||Z(n))},et=function(t,e){var a=c(t);this._settings=a,this.loadingCount=0,function(t,n){i&&!W(t)&&(n._observer=new IntersectionObserver((function(e){X(e,t,n)}),function(t){return{root:t.container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}}(t)))}(a,this),function(t,e){n&&window.addEventListener("online",(function(){!function(t,n){var e;(e=Z(t),Y(e).filter(tt)).forEach((function(n){h(n,t.class_error),_(n)})),n.update()}(t,e)}))}(a,this),this.update(e)};return et.prototype={update:function(t){var n,a,o=this._settings,r=nt(t,o);y(this,r.length),!e&&i?W(o)?function(t,n,e){t.forEach((function(t){-1!==Q.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),function(t,n,e){B(t,n,e),G(t,n),V(t,n),f(t,"native")}(t,n,e))})),y(e,0)}(r,o,this):(a=r,function(t){t.disconnect()}(n=this._observer),function(t,n){n.forEach((function(n){t.observe(n)}))}(n,a)):this.loadAll(r)},destroy:function(){this._observer&&this._observer.disconnect(),Z(this._settings).forEach((function(t){delete t.llOriginalAttrs})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var n=this,e=this._settings;nt(t,e).forEach((function(t){K(t,e,n)}))}},et.load=function(t,n){var e=c(n);K(t,e)},et.resetStatus=function(t){_(t)},n&&function(t,n){if(n)if(n.length)for(var e,i=0;e=n[i];i+=1)l(t,e);else l(t,n)}(et,window.lazyLoadOptions),et})); +!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(n=n||self).LazyLoad=t()}(this,(function(){"use strict";function n(){return(n=Object.assign||function(n){for(var t=1;t1,r={elements_selector:".lazy",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},c=function(t){return n({},r,t)},l=function(n,t){var e,i=new n(t);try{e=new CustomEvent("LazyLoad::Initialized",{detail:{instance:i}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:i})}window.dispatchEvent(e)},s=function(n,t){return n.getAttribute("data-"+t)},u=function(n,t,e){var i="data-"+t;null!==e?n.setAttribute(i,e):n.removeAttribute(i)},d=function(n){return s(n,"ll-status")},f=function(n,t){return u(n,"ll-status",t)},_=function(n){return f(n,null)},g=function(n){return null===d(n)},v=function(n){return"native"===d(n)},p=["loading","loaded","applied","error"],b=function(n,t,e,i){n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},h=function(n,t){a?n.classList.add(t):n.className+=(n.className?" ":"")+t},m=function(n,t){a?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},E=function(n){return n.llTempImage},I=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},y=function(n,t){n&&(n.loadingCount+=t)},A=function(n,t){n&&(n.toLoadCount=t)},L=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},w=function(n,t,e){e&&n.setAttribute(t,e)},z=function(n,t){n.removeAttribute(t)},k=function(n){return!!n.llOriginalAttrs},O=function(n){if(!k(n)){var t={};t.src=n.getAttribute("src"),t.srcset=n.getAttribute("srcset"),t.sizes=n.getAttribute("sizes"),n.llOriginalAttrs=t}},C=function(n){if(k(n)){var t=n.llOriginalAttrs;w(n,"src",t.src),w(n,"srcset",t.srcset),w(n,"sizes",t.sizes)}},N=function(n,t){w(n,"sizes",s(n,t.data_sizes)),w(n,"srcset",s(n,t.data_srcset)),w(n,"src",s(n,t.data_src))},x=function(n){z(n,"src"),z(n,"srcset"),z(n,"sizes")},M=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&L(e).forEach(t)},R=function(n,t){L(n).forEach(t)},G={IMG:function(n,t){M(n,(function(n){O(n),N(n,t)})),O(n),N(n,t)},IFRAME:function(n,t){w(n,"src",s(n,t.data_src))},VIDEO:function(n,t){R(n,(function(n){w(n,"src",s(n,t.data_src))})),w(n,"poster",s(n,t.data_poster)),w(n,"src",s(n,t.data_src)),n.load()}},T=function(n,t){var e=G[n.tagName];e&&e(n,t)},D=function(n,t,e){y(e,1),h(n,t.class_loading),f(n,"loading"),b(t.callback_loading,n,e)},F={IMG:function(n,t){u(n,t.data_src,null),u(n,t.data_srcset,null),u(n,t.data_sizes,null),M(n,(function(n){u(n,t.data_srcset,null),u(n,t.data_sizes,null)}))},IFRAME:function(n,t){u(n,t.data_src,null)},VIDEO:function(n,t){u(n,t.data_src,null),u(n,t.data_poster,null),R(n,(function(n){u(n,t.data_src,null)}))}},V=function(n,t){u(n,t.data_bg_multi,null),u(n,t.data_bg_multi_hidpi,null)},j=function(n,t){var e=F[n.tagName];e?e(n,t):function(n,t){u(n,t.data_bg,null),u(n,t.data_bg_hidpi,null)}(n,t)},P=["IMG","IFRAME","VIDEO"],S=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||b(n.callback_finish,t)},U=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},$=function(n,t,e){n.removeEventListener(t,e)},q=function(n){return!!n.llEvLisnrs},H=function(n){if(q(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];$(n,e,i)}delete n.llEvLisnrs}},B=function(n,t,e){!function(n){delete n.llTempImage}(n),y(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),m(n,t.class_loading),t.unobserve_completed&&I(n,e)},J=function(n,t,e){var i=E(n)||n;q(i)||function(n,t,e){q(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";U(n,i,t),U(n,"error",e)}(i,(function(a){!function(n,t,e,i){var a=v(t);B(t,e,i),h(t,e.class_loaded),f(t,"loaded"),j(t,e),b(e.callback_loaded,t,i),a||S(e,i)}(0,n,t,e),H(i)}),(function(a){!function(n,t,e,i){var a=v(t);B(t,e,i),h(t,e.class_error),f(t,"error"),b(e.callback_error,t,i),a||S(e,i)}(0,n,t,e),H(i)}))},K=function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),J(n,t,e),function(n,t,e){var i=s(n,t.data_bg),a=s(n,t.data_bg_hidpi),r=o&&a?a:i;r&&(n.style.backgroundImage='url("'.concat(r,'")'),E(n).setAttribute("src",r),D(n,t,e))}(n,t,e),function(n,t,e){var i=s(n,t.data_bg_multi),a=s(n,t.data_bg_multi_hidpi),r=o&&a?a:i;r&&(n.style.backgroundImage=r,function(n,t,e){h(n,t.class_applied),f(n,"applied"),V(n,t),t.unobserve_completed&&I(n,t),b(t.callback_applied,n,e)}(n,t,e))}(n,t,e)},Q=function(n,t,e){!function(n){return P.indexOf(n.tagName)>-1}(n)?K(n,t,e):function(n,t,e){J(n,t,e),T(n,t),D(n,t,e)}(n,t,e)},W=["IMG","IFRAME"],X=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},Y=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){f(n,"entered"),function(n,t,e){t.unobserve_entered&&I(n,e)}(n,e,i),b(e.callback_enter,n,t,i),function(n){return p.indexOf(d(n))>=0}(n)||Q(n,e,i)}(n.target,n,t,e):function(n,t,e,i){g(n)||(function(n,t,e,i){e.cancel_on_exit&&function(n){return"loading"===d(n)}(n)&&"IMG"===n.tagName&&(H(n),function(n){M(n,(function(n){x(n)})),x(n)}(n),function(n){M(n,(function(n){C(n)})),C(n)}(n),m(n,e.class_loading),y(i,-1),_(n),b(e.callback_cancel,n,t,i))}(n,t,e,i),b(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},Z=function(n){return Array.prototype.slice.call(n)},nn=function(n){return n.container.querySelectorAll(n.elements_selector)},tn=function(n){return function(n){return"error"===d(n)}(n)},en=function(n,t){return function(n){return Z(n).filter(g)}(n||nn(t))},an=function(n,e){var a=c(n);this._settings=a,this.loadingCount=0,function(n,t){i&&!X(n)&&(t._observer=new IntersectionObserver((function(e){Y(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(a,this),function(n,e){t&&window.addEventListener("online",(function(){!function(n,t){var e;(e=nn(n),Z(e).filter(tn)).forEach((function(t){m(t,n.class_error),_(t)})),t.update()}(n,e)}))}(a,this),this.update(e)};return an.prototype={update:function(n){var t,a,o=this._settings,r=en(n,o);A(this,r.length),!e&&i?X(o)?function(n,t,e){n.forEach((function(n){-1!==W.indexOf(n.tagName)&&(n.setAttribute("loading","lazy"),function(n,t,e){J(n,t,e),T(n,t),j(n,t),f(n,"native")}(n,t,e))})),A(e,0)}(r,o,this):(a=r,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,a)):this.loadAll(r)},destroy:function(){this._observer&&this._observer.disconnect(),nn(this._settings).forEach((function(n){delete n.llOriginalAttrs})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;en(n,e).forEach((function(n){Q(n,e,t)}))}},an.load=function(n,t){var e=c(t);Q(n,e)},an.resetStatus=function(n){_(n)},t&&function(n,t){if(t)if(t.length)for(var e,i=0;e=t[i];i+=1)l(n,e);else l(n,t)}(an,window.lazyLoadOptions),an})); diff --git a/package.json b/package.json index bf1b7419..1a9e66af 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vanilla-lazyload", - "version": "17.0.0", + "version": "17.0.1", "description": "LazyLoad is a lightweight (2.4 kB) and flexible script that speeds up your web application by deferring the loading of your below-the-fold images, videos and iframes to when they will enter the viewport. It's written in plain \"vanilla\" JavaScript, it leverages the IntersectionObserver API, it supports responsive images, it optimizes your website for slower connections, and can enable native lazy loading.", "main": "dist/lazyload.min.js", "module": "dist/lazyload.esm.js", diff --git a/src/lazyload.data.js b/src/lazyload.data.js index 5d358b49..18e55c15 100644 --- a/src/lazyload.data.js +++ b/src/lazyload.data.js @@ -1,4 +1,4 @@ -import { statusError, statusLoading, statusNative } from "./lazyload.elementStatus"; +import { statusError, statusLoading, statusApplied, statusNative, statusLoaded } from "./lazyload.elementStatus"; const dataPrefix = "data-"; const statusDataName = "ll-status"; @@ -24,4 +24,6 @@ export const hasEmptyStatus = (element) => getStatus(element) === null; export const hasStatusLoading = (element) => getStatus(element) === statusLoading; export const hasStatusError = (element) => getStatus(element) === statusError; export const hasStatusNative = (element) => getStatus(element) === statusNative; -export const hadStartedLoading = (element) => !hasEmptyStatus(element); + +const statusesAfterLoading = [statusLoading, statusLoaded, statusApplied, statusError]; +export const hadStartedLoading = (element) => (statusesAfterLoading.indexOf(getStatus(element)) >= 0);