-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1 lines (1 loc) · 2.54 KB
/
index.html
1
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="author" content="clonalejandro"> <meta name="keywords" content="lazy, load, lazyload, images, loader, cargador, optimizador, imagenes"> <meta name="description" content="A js lazyload for websites opensource"> <title>Test | LazyLoad</title> <link href="https://clonalejandro.github.io/cdn/clonaweb/malextrap.min.css" rel="stylesheet"> <link href="./lazyload.css" rel="stylesheet"> <style>div.head > div.title > h1.headline > span.magic{color: #2ecc71}div.head > div.title > h1.headline{font-size: 2.5em}div.container > div.columns > img{width: 300px; height: 300px; margin-right: 1.5em; margin-bottom: 1.5em;}</style> </head> <body> <div id="wrapper"> <header class="header"> <div class="head"> <div class="title"> <h1 class="headline"> Lazy<span class="magic">load</span> </h1> </div></div></header> <form onsubmit="return false"> <div class="form-group"> <label>Timeout: </label> <input onkeyup="onInputChange(event)" ondragover="onInputChange(this)" type="number" class="timeout" value="50"> </div></form> <div class="container"> <div class="columns"> <img src="" data-src="img/image1.jpg"/> <img src="" data-src="img/image2.jpg"/> <img src="" data-src="img/image3.jpg"/> <img src="" data-src="img/image1.jpg"/> <img src="" data-src="img/image2.jpg"/> <img src="" data-src="img/image3.jpg"/> <img src="" data-src="img/image1.jpg"/> <img src="" data-src="img/image2.jpg"/> <img src="" data-src="img/image3.jpg"/> <img src="" data-src="img/image1.jpg"/> <img src="" data-src="img/image2.jpg"/> <img src="" data-src="img/image3.jpg"/> <img src="" data-src="img/image1.jpg"/> <img src="" data-src="img/image2.jpg"/> <img src="" data-src="img/image3.jpg"/> </div></div></div><script type="text/javascript" src="./lazyload.js"></script> <script type="text/javascript">const timeout=!isNaN(window.location.hash.slice(1)) ? location.hash.slice(1) : null; function prepareInput(){const input=document.getElementsByClassName("timeout")[0]; if (timeout !=null && timeout !=undefined && timeout !="") input.setAttribute("value", timeout);}function onInputChange(event){const element=document.getElementsByClassName("timeout")[0]; const ntimeout=element.value; if (event.keyCode==13){window.location.hash="#" + ntimeout; window.location.reload();}}document.addEventListener("DOMContentLoaded", ()=>{prepareInput(); new LazyLoad(timeout);});</script></body></html>