<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8" /> <title> Images with srcset and eager sizes - Lazyload demos </title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> ul, li { list-style-type: none; margin: 0; padding: 0; } li { min-height: 280px; } a, img { display: block; } img { border: 0; width: 220px; height: 280px; } img:not([src]):not([srcset]) { visibility: hidden; } </style> </head> <body> <h1>Images with srcset and eager sizes 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" srcset=" https://via.placeholder.com/220x280?text=Img+01 220w, https://via.placeholder.com/440x560?text=Img+01 440w " sizes="220px" /> </a> </li> <li> <a href="#/it/donna/open-toe_cod44740806jx.html"> <img alt="Open toe" src="https://via.placeholder.com/440x560?text=Img+02" srcset=" https://via.placeholder.com/220x280?text=Img+02 220w, https://via.placeholder.com/440x560?text=Img+02 440w " sizes="220px" /> </a> </li> <li> <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html"> <img alt="Sneakers & Tennis" class="lazy" data-src="https://via.placeholder.com/440x560?text=Img+03" data-srcset="https://via.placeholder.com/220x280?text=Img+03 220w, https://via.placeholder.com/440x560?text=Img+03 440w" sizes="220px" /> </a> </li> <li> <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html"> <img alt="Sneakers & Tennis shoes basse" class="lazy" data-src="https://via.placeholder.com/440x560?text=Img+04" data-srcset="https://via.placeholder.com/220x280?text=Img+04 220w, https://via.placeholder.com/440x560?text=Img+04 440w" sizes="220px" /> </a> </li> <li> <a href="#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html"> <img alt="Sneakers & Tennis shoes alte" class="lazy" data-src="https://via.placeholder.com/440x560?text=Img+05" data-srcset="https://via.placeholder.com/220x280?text=Img+05 220w, https://via.placeholder.com/440x560?text=Img+05 440w" sizes="220px" /> </a> </li> <li> <a href="#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html"> <img alt="Sneakers & Tennis shoes alte" class="lazy" data-src="https://via.placeholder.com/440x560?text=Img+06" data-srcset="https://via.placeholder.com/220x280?text=Img+06 220w, https://via.placeholder.com/440x560?text=Img+06 440w" sizes="220px" /> </a> </li> <li> <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html"> <img alt="Sneakers & Tennis shoes basse" class="lazy" data-src="https://via.placeholder.com/440x560?text=Img+07" data-srcset="https://via.placeholder.com/220x280?text=Img+07 220w, https://via.placeholder.com/440x560?text=Img+07 440w" sizes="220px" /> </a> </li> <li> <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html"> <img alt="Sneakers & Tennis shoes basse" class="lazy" data-src="https://via.placeholder.com/440x560?text=Img+08" data-srcset="https://via.placeholder.com/220x280?text=Img+08 220w, https://via.placeholder.com/440x560?text=Img+08 440w" sizes="220px" /> </a> </li> <li> <a href="#/it/donna/stivali_cod44736534fq.html"> <img alt="Stivali" class="lazy" data-src="https://via.placeholder.com/440x560?text=Img+09" data-srcset="https://via.placeholder.com/220x280?text=Img+09 220w, https://via.placeholder.com/440x560?text=Img+09 440w" sizes="220px" /> </a> </li> <li> <a href="#/it/donna/stivali_cod44735388ui.html"> <img alt="Stivali" class="lazy" data-src="https://via.placeholder.com/440x560?text=Img+10" data-srcset="https://via.placeholder.com/220x280?text=Img+10 220w, https://via.placeholder.com/440x560?text=Img+10 440w" sizes="220px" /> </a> </li> <li> <a href="#/it/donna/stivaletti_cod44739165ev.html"> <img alt="Stivaletti" class="lazy" data-src="https://via.placeholder.com/440x560?text=Img+11" data-srcset="https://via.placeholder.com/220x280?text=Img+11 220w, https://via.placeholder.com/440x560?text=Img+11 440w" sizes="220px" /> </a> </li> <li> <a href="#/it/donna/stivaletti_cod44739454hf.html"> <img alt="Stivaletti" class="lazy" data-src="https://via.placeholder.com/440x560?text=Img+12" data-srcset="https://via.placeholder.com/220x280?text=Img+12 220w, https://via.placeholder.com/440x560?text=Img+12 440w" sizes="220px" /> </a> </li> <li> <a href="#/it/donna/stivali_cod44719480km.html"> <img alt="Stivali" class="lazy" data-src="https://via.placeholder.com/440x560?text=Img+13" data-srcset="https://via.placeholder.com/220x280?text=Img+13 220w, https://via.placeholder.com/440x560?text=Img+13 440w" sizes="220px" /> </a> </li> <li> <a href="#/it/donna/stivaletti_cod44719687td.html"> <img alt="Stivaletti" class="lazy" data-src="https://via.placeholder.com/440x560?text=Img+14" data-srcset="https://via.placeholder.com/220x280?text=Img+14 220w, https://via.placeholder.com/440x560?text=Img+14 440w" sizes="220px" /> </a> </li> <li> <a href="#/it/donna/decollete_cod44721899ng.html"> <img alt="Décolleté" class="lazy" data-src="https://via.placeholder.com/440x560?text=Img+15" data-srcset="https://via.placeholder.com/220x280?text=Img+15 220w, https://via.placeholder.com/440x560?text=Img+15 440w" sizes="220px" /> </a> </li> <li> <a href="#/it/donna/mocassini_cod44721744sl.html"> <img alt="Mocassini" class="lazy" data-src="https://via.placeholder.com/440x560?text=Img+16" data-srcset="https://via.placeholder.com/220x280?text=Img+16 220w, https://via.placeholder.com/440x560?text=Img+16 440w" sizes="220px" /> </a> </li> <li> <a href="#/it/donna/stivaletti_cod44716730kr.html"> <img alt="Stivaletti" class="lazy" data-src="https://via.placeholder.com/440x560?text=Img+17" data-srcset="https://via.placeholder.com/220x280?text=Img+17 220w, https://via.placeholder.com/440x560?text=Img+17 440w" sizes="220px" /> </a> </li> <li> <a href="#/it/donna/decollete_cod44718734xl.html"> <img alt="Décolleté" class="lazy" data-src="https://via.placeholder.com/440x560?text=Img+18" data-srcset="https://via.placeholder.com/220x280?text=Img+18 220w, https://via.placeholder.com/440x560?text=Img+18 440w" sizes="220px" /> </a> </li> <li> <a href="#/it/donna/decollete_cod44721796uk.html"> <img alt="Décolleté" class="lazy" data-src="https://via.placeholder.com/440x560?text=Img+19" data-srcset="https://via.placeholder.com/220x280?text=Img+19 220w, https://via.placeholder.com/440x560?text=Img+19 440w" sizes="220px" /> </a> </li> <li> <a href="#/it/donna/francesine_cod44717679mj.html"> <img alt="Francesine" class="lazy" data-src="https://via.placeholder.com/440x560?text=Img+20" data-srcset="https://via.placeholder.com/220x280?text=Img+20 220w, https://via.placeholder.com/440x560?text=Img+20 440w" sizes="220px" /> </a> </li> <li> <a href="#/it/donna/stivaletti_cod44724594vu.html"> <img alt="Stivaletti" class="lazy" data-src="https://via.placeholder.com/440x560?text=Img+21" data-srcset="https://via.placeholder.com/220x280?text=Img+21 220w, https://via.placeholder.com/440x560?text=Img+21 440w" sizes="220px" /> </a> </li> <li> <a href="#/it/donna/decollete_cod44726148aq.html"> <img alt="Décolleté" class="lazy" data-src="https://via.placeholder.com/440x560?text=Img+22" data-srcset="https://via.placeholder.com/220x280?text=Img+22 220w, https://via.placeholder.com/440x560?text=Img+22 440w" sizes="220px" /> </a> </li> <li> <a href="#/it/donna/mocassini_cod44719629nt.html"> <img alt="Mocassini" class="lazy" data-src="https://via.placeholder.com/440x560?text=Img+23" data-srcset="https://via.placeholder.com/220x280?text=Img+23 220w, https://via.placeholder.com/440x560?text=Img+23 440w" sizes="220px" /> </a> </li> <li> <a href="#/it/donna/mocassini_cod44725329kq.html"> <img alt="Mocassini" class="lazy" data-src="https://via.placeholder.com/440x560?text=Img+24" data-srcset="https://via.placeholder.com/220x280?text=Img+24 220w, https://via.placeholder.com/440x560?text=Img+24 440w" sizes="220px" /> </a> </li> <li> <a href="#/it/donna/stivali_cod44724026qs.html"> <img alt="Stivali" class="lazy" data-src="https://via.placeholder.com/440x560?text=Img+25" data-srcset="https://via.placeholder.com/220x280?text=Img+25 220w, https://via.placeholder.com/440x560?text=Img+25 440w" sizes="220px" /> </a> </li> <li> <a href="#/it/donna/stivaletti_cod44720256gw.html"> <img alt="Stivaletti" class="lazy" data-src="https://via.placeholder.com/440x560?text=Img+26" data-srcset="https://via.placeholder.com/220x280?text=Img+26 220w, https://via.placeholder.com/440x560?text=Img+26 440w" sizes="220px" /> </a> </li> <li> <a href="#/it/donna/stivaletti_cod44722062id.html"> <img alt="Stivaletti" class="lazy" data-src="https://via.placeholder.com/440x560?text=Img+27" data-srcset="https://via.placeholder.com/220x280?text=Img+27 220w, https://via.placeholder.com/440x560?text=Img+27 440w" sizes="220px" /> </a> </li> <li> <a href="#/it/donna/mocassini_cod44722402rh.html"> <img alt="Mocassini" class="lazy" data-src="https://via.placeholder.com/440x560?text=Img+28" data-srcset="https://via.placeholder.com/220x280?text=Img+28 220w, https://via.placeholder.com/440x560?text=Img+28 440w" sizes="220px" /> </a> </li> <li> <a href="#/it/donna/stivaletti_cod44726296vu.html"> <img alt="Stivaletti" class="lazy" data-src="https://via.placeholder.com/440x560?text=Img+29" data-srcset="https://via.placeholder.com/220x280?text=Img+29 220w, https://via.placeholder.com/440x560?text=Img+29 440w" sizes="220px" /> </a> </li> <li> <a href="#/it/donna/stivaletti_cod44725755ct.html"> <img alt="Stivaletti" class="lazy" data-src="https://via.placeholder.com/440x560?text=Img+30" data-srcset="https://via.placeholder.com/220x280?text=Img+30 220w, https://via.placeholder.com/440x560?text=Img+30 440w" sizes="220px" /> </a> </li> <li> <a href="#/it/donna/stivaletti_cod44725348nv.html"> <img alt="Stivaletti" class="lazy" data-src="https://via.placeholder.com/440x560?text=Img+31" data-srcset="https://via.placeholder.com/220x280?text=Img+31 220w, https://via.placeholder.com/440x560?text=Img+31 440w" sizes="220px" /> </a> </li> <li> <a href="#/it/donna/stivaletti_cod44721879xx.html"> <img alt="Stivaletti" class="lazy" data-src="https://via.placeholder.com/440x560?text=Img+32" data-srcset="https://via.placeholder.com/220x280?text=Img+32 220w, https://via.placeholder.com/440x560?text=Img+32 440w" sizes="220px" /> </a> </li> <li> <a href="#/it/donna/cuissardes_cod44729472iq.html"> <img alt="Cuissardes" class="lazy" data-src="https://via.placeholder.com/440x560?text=Img+33" data-srcset="https://via.placeholder.com/220x280?text=Img+33 220w, https://via.placeholder.com/440x560?text=Img+33 440w" sizes="220px" /> </a> </li> <li> <a href="#/it/donna/decollete_cod44725388jv.html"> <img alt="Décolleté" class="lazy" data-src="https://via.placeholder.com/440x560?text=Img+34" data-srcset="https://via.placeholder.com/220x280?text=Img+34 220w, https://via.placeholder.com/440x560?text=Img+34 440w" sizes="220px" /> </a> </li> <li> <a href="#/it/donna/stivaletti_cod44721854ce.html"> <img alt="Stivaletti" class="lazy" data-src="https://via.placeholder.com/440x560?text=Img+35" data-srcset="https://via.placeholder.com/220x280?text=Img+35 220w, https://via.placeholder.com/440x560?text=Img+35 440w" sizes="220px" /> </a> </li> <li> <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html"> <img alt="Sneakers & Tennis shoes basse" class="lazy" data-src="https://via.placeholder.com/440x560?text=Img+36" data-srcset="https://via.placeholder.com/220x280?text=Img+36 220w, https://via.placeholder.com/440x560?text=Img+36 440w" sizes="220px" /> </a> </li> <li> <a href="#/it/donna/mocassini_cod44727501hh.html"> <img alt="Mocassini" class="lazy" data-src="https://via.placeholder.com/440x560?text=Img+37" data-srcset="https://via.placeholder.com/220x280?text=Img+37 220w, https://via.placeholder.com/440x560?text=Img+37 440w" sizes="220px" /> </a> </li> <li> <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html"> <img alt="Sneakers & Tennis shoes basse" class="lazy" data-src="https://via.placeholder.com/440x560?text=Img+38" data-srcset="https://via.placeholder.com/220x280?text=Img+38 220w, https://via.placeholder.com/440x560?text=Img+38 440w" sizes="220px" /> </a> </li> <li> <a href="#/it/donna/mocassini_cod44704882bq.html"> <img alt="Mocassini" class="lazy" data-src="https://via.placeholder.com/440x560?text=Img+39" data-srcset="https://via.placeholder.com/220x280?text=Img+39 220w, https://via.placeholder.com/440x560?text=Img+39 440w" sizes="220px" /> </a> </li> <li> <a href="#/it/donna/mocassini_cod44734002vc.html"> <img alt="Mocassini" class="lazy" data-src="https://via.placeholder.com/440x560?text=Img+40" data-srcset="https://via.placeholder.com/220x280?text=Img+40 220w, https://via.placeholder.com/440x560?text=Img+40 440w" sizes="220px" /> </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); }; ll = new LazyLoad({ // 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>