<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8" /> <title>Background images - 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 { display: block; width: 220px; height: 280px; background-size: 220px 280px; } a.multiple { width: 440px; background-repeat: no-repeat; background-position: left, right; } </style> </head> <body> <h1>Background images demo</h1> <div id="results1" class="results"> <ul> <li> <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+01" data-bg-hidpi="https://via.placeholder.com/440x560?text=Img+01" ></a> </li> <li> <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+02"></a> </li> <li> <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+03" data-bg-hidpi="https://via.placeholder.com/440x560?text=Img+03" ></a> </li> <li> <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+04"></a> </li> <li> <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+05" data-bg-hidpi="https://via.placeholder.com/440x560?text=Img+05" ></a> </li> <li> <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+06"></a> </li> <li> <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+07" data-bg-hidpi="https://via.placeholder.com/440x560?text=Img+07" ></a> </li> <li> <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+08" data-bg-hidpi="https://via.placeholder.com/440x560?text=Img+08" ></a> </li> <li> <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+09" data-bg-hidpi="https://via.placeholder.com/440x560?text=Img+09" ></a> </li> <li> <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+10" data-bg-hidpi="https://via.placeholder.com/440x560?text=Img+10" ></a> </li> <li> <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+11" data-bg-hidpi="https://via.placeholder.com/440x560?text=Img+11" ></a> </li> <li> <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+12" data-bg-hidpi="https://via.placeholder.com/440x560?text=Img+12" ></a> </li> <li> <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+13" data-bg-hidpi="https://via.placeholder.com/440x560?text=Img+13" ></a> </li> <li> <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+14" data-bg-hidpi="https://via.placeholder.com/440x560?text=Img+14" ></a> </li> <li> <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+15" data-bg-hidpi="https://via.placeholder.com/440x560?text=Img+15" ></a> </li> <li> <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+16" data-bg-hidpi="https://via.placeholder.com/440x560?text=Img+16" ></a> </li> <li> <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+17" data-bg-hidpi="https://via.placeholder.com/440x560?text=Img+17" ></a> </li> <li> <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+18" data-bg-hidpi="https://via.placeholder.com/440x560?text=Img+18" ></a> </li> <li> <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+19" data-bg-hidpi="https://via.placeholder.com/440x560?text=Img+19" ></a> </li> <li> <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+20" data-bg-hidpi="https://via.placeholder.com/440x560?text=Img+20" ></a> </li> <li> <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+21" data-bg-hidpi="https://via.placeholder.com/440x560?text=Img+21" ></a> </li> <li> <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+22" data-bg-hidpi="https://via.placeholder.com/440x560?text=Img+22" ></a> </li> <li> <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+23" data-bg-hidpi="https://via.placeholder.com/440x560?text=Img+23" ></a> </li> <li> <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+24" data-bg-hidpi="https://via.placeholder.com/440x560?text=Img+24" ></a> </li> <li> <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+25" data-bg-hidpi="https://via.placeholder.com/440x560?text=Img+25" ></a> </li> <li> <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+26" data-bg-hidpi="https://via.placeholder.com/440x560?text=Img+26" ></a> </li> <li> <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+27" data-bg-hidpi="https://via.placeholder.com/440x560?text=Img+27" ></a> </li> <li> <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+28" data-bg-hidpi="https://via.placeholder.com/440x560?text=Img+28" ></a> </li> <li> <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+29" data-bg-hidpi="https://via.placeholder.com/440x560?text=Img+29" ></a> </li> <li> <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+30" data-bg-hidpi="https://via.placeholder.com/440x560?text=Img+30" ></a> </li> <li> <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+31" data-bg-hidpi="https://via.placeholder.com/440x560?text=Img+31" ></a> </li> <li> <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+32" data-bg-hidpi="https://via.placeholder.com/440x560?text=Img+32" ></a> </li> <li> <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+33" data-bg-hidpi="https://via.placeholder.com/440x560?text=Img+33" ></a> </li> <li> <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+34" data-bg-hidpi="https://via.placeholder.com/440x560?text=Img+34" ></a> </li> <li> <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+35" data-bg-hidpi="https://via.placeholder.com/440x560?text=Img+35" ></a> </li> <li> <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+36" data-bg-hidpi="https://via.placeholder.com/440x560?text=Img+36" ></a> </li> <li> <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+37" data-bg-hidpi="https://via.placeholder.com/440x560?text=Img+37" ></a> </li> <li> <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+38" data-bg-hidpi="https://via.placeholder.com/440x560?text=Img+38" ></a> </li> <li> <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+39" data-bg-hidpi="https://via.placeholder.com/440x560?text=Img+39" ></a> </li> </ul> </div> <script src="../dist/lazyload.min.js"></script> <script> function logElementEvent(eventName, element) { console.log(Date.now(), eventName, element.getAttribute("data-bg88da112-bg-hidpi=bg")); } 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.style.backgroundImage = "url('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>