gcg/web-assets
0
0
Fork 0
Code Issues Actions Activity

Initial commit

Browse Source
This commit is contained in:
Denys Konovalov
2023-12-30 22:34:25 +01:00
commit 3553bff998
2962 changed files with 446724 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

344
lazyload/v17/demos/lazy_functions.html Normal file
View File

@ -0,0 +1,344 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title>
Lazy functions - Lazyload demos
</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
ul,
li {
list-style-type: none;
margin: 0;
padding: 0;
}
a,
img {
display: block;
}
img {
border: 0;
width: 220px;
height: 280px;
}
img:not([src]) {
visibility: hidden;
}
.boo {
font-size: 160px;
}
/* Fixes Firefox anomaly during image load */
@-moz-document url-prefix() {
img:-moz-loading {
visibility: hidden;
}
}
</style>
</head>
<body>
<h1>Lazy functions demo</h1>
<p>
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!
</p>
<p>
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!
</p>
<p>
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?
</p>
<p>
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!
</p>
<p>
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!
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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?
</p>
<p>
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.
</p>
<p>
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.
</p>
<div class="lazy" data-lazy-function="foo">Script execution here</div>
<p>
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!
</p>
<p>
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!
</p>
<p>
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.
</p>
<p>
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!
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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!
</p>
<p>
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!
</p>
<p>
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.
</p>
<p>
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.
</p>
<div class="lazy" data-lazy-function="bar">Script execution here</div>
<p>
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?
</p>
<p>
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!
</p>
<p>
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!
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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!
</p>
<p>
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!
</p>
<p>
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.
</p>
<p>
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?
</p>
<div class="lazy" data-lazy-function="buzz">Script execution here</div>
<p>
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.
</p>
<p>
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?
</p>
<p>
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.
</p>
<p>
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!
</p>
<p>
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!
</p>
<p>
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?
</p>
<p>
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?
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<div class="lazy" data-lazy-function="booya">Script execution here</div>
<script src="../dist/lazyload.js"></script>
<script>
window.lazyFunctions = {
foo: function (element) {
element.style.color = "red";
console.log("foo");
},
bar: function (element) {
element.remove(element);
console.log("bar");
},
buzz: function (element) {
var span = document.createElement("span");
span.innerText = " - buzz!";
element.appendChild(span);
console.log("buzz");
},
booya: function (element) {
element.classList.add("boo");
console.log("booya");
}
};
</script>
<script>
(function () {
function logElementEvent(eventName, element) {
console.log(Date.now(), eventName, element.getAttribute("data-src"));
}
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_cancel: callback_cancel,
callback_loading: callback_loading,
callback_loaded: callback_loaded,
callback_error: callback_error,
callback_finish: callback_finish
});
})();
</script>
</body>
</html>