<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8" /> <title> Fade in effect - Lazyload demos </title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body { font-family: sans-serif; } .intro { margin: 1em 0; } p { margin: 0.3em 0; } ul, li { list-style-type: none; margin: 0; padding: 0; } img { display: block; border: 0; width: 220px; height: 280px; } img.lazy { opacity: 0; } img:not(.initial) { transition: opacity 1s; } img.initial, img.loaded, img.error { opacity: 1; } img:not([src]) { visibility: hidden; } </style> </head> <body> <h1>Fade in effect demo</h1> <div id="results1" class="results"> <ul> <li> <a href="#/it/donna/stivaletti_cod44721746jj.html" ><img alt="Stivaletti" src="https://via.placeholder.com/440x560?text=Img+01" width="220" height="280" /></a> </li> <li> <a href="#/it/donna/open-toe_cod44740806jx.html" ><img alt="Open toe" src="https://via.placeholder.com/440x560?text=Img+02" width="220" height="280" /></a> </li> <li> <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html" ><img class="lazy" alt="Sneakers & Tennis" data-src="https://via.placeholder.com/440x560?text=Img+03" width="220" height="280" /></a> </li> <li> <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html" ><img class="lazy" alt="Sneakers & Tennis shoes basse" data-src="https://via.placeholder.com/440x560?text=Img+04" width="220" height="280" /></a> </li> <li> <a href="#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html" ><img class="lazy" alt="Sneakers & Tennis shoes alte" data-src="https://via.placeholder.com/440x560?text=Img+05" width="220" height="280" /></a> </li> <li> <a href="#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html" ><img class="lazy" alt="Sneakers & Tennis shoes alte" data-src="https://via.placeholder.com/440x560?text=Img+06" width="220" height="280" /></a> </li> <li> <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html" ><img class="lazy" alt="Sneakers & Tennis shoes basse" data-src="https://via.placeholder.com/440x560?text=Img+07" width="220" height="280" /></a> </li> <li> <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html" ><img class="lazy" alt="Sneakers & Tennis shoes basse" data-src="https://via.placeholder.com/440x560?text=Img+08" width="220" height="280" /></a> </li> <li> <a href="#/it/donna/stivali_cod44736534fq.html" ><img class="lazy" alt="Stivali" data-src="https://via.placeholder.com/440x560?text=Img+09" width="220" height="280" /></a> </li> <li> <a href="#/it/donna/stivali_cod44735388ui.html" ><img class="lazy" alt="Stivali" data-src="https://via.placeholder.com/440x560?text=Img+10" width="220" height="280" /></a> </li> <li> <a href="#/it/donna/stivaletti_cod44739165ev.html" ><img class="lazy" alt="Stivaletti" data-src="https://via.placeholder.com/440x560?text=Img+11" width="220" height="280" /></a> </li> <li> <a href="#/it/donna/stivaletti_cod44739454hf.html" ><img class="lazy" alt="Stivaletti" data-src="https://via.placeholder.com/440x560?text=Img+12" width="220" height="280" /></a> </li> <li> <a href="#/it/donna/stivali_cod44719480km.html" ><img class="lazy" alt="Stivali" data-src="https://via.placeholder.com/440x560?text=Img+13" width="220" height="280" /></a> </li> <li> <a href="#/it/donna/stivaletti_cod44719687td.html" ><img class="lazy" alt="Stivaletti" data-src="https://via.placeholder.com/440x560?text=Img+14" width="220" height="280" /></a> </li> <li> <a href="#/it/donna/decollete_cod44721899ng.html" ><img class="lazy" alt="Décolleté" data-src="https://via.placeholder.com/440x560?text=Img+15" width="220" height="280" /></a> </li> <li> <a href="#/it/donna/mocassini_cod44721744sl.html" ><img class="lazy" alt="Mocassini" data-src="https://via.placeholder.com/440x560?text=Img+16" width="220" height="280" /></a> </li> <li> <a href="#/it/donna/stivaletti_cod44716730kr.html" ><img class="lazy" alt="Stivaletti" data-src="https://via.placeholder.com/440x560?text=Img+17" width="220" height="280" /></a> </li> <li> <a href="#/it/donna/decollete_cod44718734xl.html" ><img class="lazy" alt="Décolleté" data-src="https://via.placeholder.com/440x560?text=Img+18" width="220" height="280" /></a> </li> <li> <a href="#/it/donna/decollete_cod44721796uk.html" ><img class="lazy" alt="Décolleté" data-src="https://via.placeholder.com/440x560?text=Img+19" width="220" height="280" /></a> </li> <li> <a href="#/it/donna/francesine_cod44717679mj.html" ><img class="lazy" alt="Francesine" data-src="https://via.placeholder.com/440x560?text=Img+20" width="220" height="280" /></a> </li> <li> <a href="#/it/donna/stivaletti_cod44724594vu.html" ><img class="lazy" alt="Stivaletti" data-src="https://via.placeholder.com/440x560?text=Img+21" width="220" height="280" /></a> </li> <li> <a href="#/it/donna/decollete_cod44726148aq.html" ><img class="lazy" alt="Décolleté" data-src="https://via.placeholder.com/440x560?text=Img+22" width="220" height="280" /></a> </li> <li> <a href="#/it/donna/mocassini_cod44719629nt.html" ><img class="lazy" alt="Mocassini" data-src="https://via.placeholder.com/440x560?text=Img+23" width="220" height="280" /></a> </li> <li> <a href="#/it/donna/mocassini_cod44725329kq.html" ><img class="lazy" alt="Mocassini" data-src="https://via.placeholder.com/440x560?text=Img+24" width="220" height="280" /></a> </li> <li> <a href="#/it/donna/stivali_cod44724026qs.html" ><img class="lazy" alt="Stivali" data-src="https://via.placeholder.com/440x560?text=Img+25" width="220" height="280" /></a> </li> <li> <a href="#/it/donna/stivaletti_cod44720256gw.html" ><img class="lazy" alt="Stivaletti" data-src="https://via.placeholder.com/440x560?text=Img+26" width="220" height="280" /></a> </li> <li> <a href="#/it/donna/stivaletti_cod44722062id.html" ><img class="lazy" alt="Stivaletti" data-src="https://via.placeholder.com/440x560?text=Img+27" width="220" height="280" /></a> </li> <li> <a href="#/it/donna/mocassini_cod44722402rh.html" ><img class="lazy" alt="Mocassini" data-src="https://via.placeholder.com/440x560?text=Img+28" width="220" height="280" /></a> </li> <li> <a href="#/it/donna/stivaletti_cod44726296vu.html" ><img class="lazy" alt="Stivaletti" data-src="https://via.placeholder.com/440x560?text=Img+29" width="220" height="280" /></a> </li> <li> <a href="#/it/donna/stivaletti_cod44725755ct.html" ><img class="lazy" alt="Stivaletti" data-src="https://via.placeholder.com/440x560?text=Img+30" width="220" height="280" /></a> </li> <li> <a href="#/it/donna/stivaletti_cod44725348nv.html" ><img class="lazy" alt="Stivaletti" data-src="https://via.placeholder.com/440x560?text=Img+31" width="220" height="280" /></a> </li> <li> <a href="#/it/donna/stivaletti_cod44721879xx.html" ><img class="lazy" alt="Stivaletti" data-src="https://via.placeholder.com/440x560?text=Img+32" width="220" height="280" /></a> </li> <li> <a href="#/it/donna/cuissardes_cod44729472iq.html" ><img class="lazy" alt="Cuissardes" data-src="https://via.placeholder.com/440x560?text=Img+33" width="220" height="280" /></a> </li> <li> <a href="#/it/donna/decollete_cod44725388jv.html" ><img class="lazy" alt="Décolleté" data-src="https://via.placeholder.com/440x560?text=Img+34" width="220" height="280" /></a> </li> <li> <a href="#/it/donna/stivaletti_cod44721854ce.html" ><img class="lazy" alt="Stivaletti" data-src="https://via.placeholder.com/440x560?text=Img+35" width="220" height="280" /></a> </li> <li> <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html" ><img class="lazy" alt="Sneakers & Tennis shoes basse" data-src="https://via.placeholder.com/440x560?text=Img+36" width="220" height="280" /></a> </li> <li> <a href="#/it/donna/mocassini_cod44727501hh.html" ><img class="lazy" alt="Mocassini" data-src="https://via.placeholder.com/440x560?text=Img+37" width="220" height="280" /></a> </li> <li> <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html" ><img class="lazy" alt="Sneakers & Tennis shoes basse" data-src="https://via.placeholder.com/440x560?text=Img+38" width="220" height="280" /></a> </li> <li> <a href="#/it/donna/mocassini_cod44704882bq.html" ><img class="lazy" alt="Mocassini" data-src="https://via.placeholder.com/440x560?text=Img+39" width="220" height="280" /></a> </li> <li> <a href="#/it/donna/mocassini_cod44734002vc.html" ><img class="lazy" alt="Mocassini" data-src="https://via.placeholder.com/440x560?text=Img+40" width="220" height="280" /></a> </li> </ul> </div> <script src="../dist/lazyload.min.js"></script> <script> (function () { function logElementEvent(eventName, element) { console.log(Date.now(), eventName, element.getAttribute("data-src")); } var callback_enter = function (element) { logElementEvent("🔑 ENTERED", element); }; 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); }; var ll = new LazyLoad({ threshold: 0, // Assign the callbacks defined above callback_enter: callback_enter, 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>