<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8" /> <title> Lazy object - Lazyload demos </title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> object { width: 100%; height: 400px; display: block; margin: 1rem 0; } </style> </head> <body> <h1>Lazy objects demo</h1> <div id="results1" class="results"> <p>Scroll down to see lazily loaded objects</p> <p>Scroll down to see lazily loaded objects</p> <p>Scroll down to see lazily loaded objects</p> <p>Scroll down to see lazily loaded objects</p> <p>Scroll down to see lazily loaded objects</p> <p>Scroll down to see lazily loaded objects</p> <p>Scroll down to see lazily loaded objects</p> <p>Scroll down to see lazily loaded objects</p> <p>Scroll down to see lazily loaded objects</p> <p>Scroll down to see lazily loaded objects</p> <p>Scroll down to see lazily loaded objects</p> <p>Scroll down to see lazily loaded objects</p> <p>Scroll down to see lazily loaded objects</p> <p>Scroll down to see lazily loaded objects</p> <p>Scroll down to see lazily loaded objects</p> <p>Scroll down to see lazily loaded objects</p> <p>Scroll down to see lazily loaded objects</p> <p>Scroll down to see lazily loaded objects</p> <p>Scroll down to see lazily loaded objects</p> <p>Scroll down to see lazily loaded objects</p> <p>Scroll down to see lazily loaded objects</p> <p>Scroll down to see lazily loaded objects</p> <p>Scroll down to see lazily loaded objects</p> <p>Scroll down to see lazily loaded objects</p> <p>Scroll down to see lazily loaded objects</p> <p>Scroll down to see lazily loaded objects</p> <p>Scroll down to see lazily loaded objects</p> <p>Scroll down to see lazily loaded objects</p> <p>Scroll down to see lazily loaded objects</p> <p>Scroll down to see lazily loaded objects</p> <object type="image/svg+xml" class="lazy" data-src="objects/svg01.svg" title="Vecta.io demo image representing an application"></object> <object type="application/pdf" class="lazy" data-src="objects/pdf01.pdf" title="A simple demonstration PDF file"></object> </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>