@blameitonyourisp/blurrid
Version:
Generate and render blurred placeholders for lazy loaded images.
47 lines • 4.47 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odit iste recusandae inventore sint minima reiciendis atque placeat voluptas distinctio sit quis, tenetur adipisci ipsa necessitatibus quod nemo eligendi deserunt eveniet?</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam consequatur obcaecati fugit ut deserunt architecto in, natus ullam recusandae autem veritatis facere, velit vel quas a possimus doloribus voluptatibus ipsa?</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque, accusantium unde nihil error animi, odit iusto beatae accusamus enim explicabo iste minus ex. Eius officia maxime velit optio. Quas, tenetur.</p>
<!-- <img
is="blurrid-image"
sizes="(max-width: 600px) 480px,
(max-width: 900px) 720px,
960px"
data-src="https://images.unsplash.com/photo-1682687220640-9d3b11ca30e5?q=80&w=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
data-srcset="https://images.unsplash.com/photo-1682687220640-9d3b11ca30e5?q=80&w=480&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 480w, https://images.unsplash.com/photo-1682687220640-9d3b11ca30e5?q=80&w=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 720w, https://images.unsplash.com/photo-1682687220640-9d3b11ca30e5?q=80&w=960&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D, 960w"
data-loading="onclick"
data-blurrid="AoADvwsQiUAjXIKiZ0-zOUClBryA1QzQpGCpEcweHCn3EjBKofn5wt0QA4FMKQcJAUCSK91pIBQnEXrmaQEgRAGaE0wzPCSGRIG5nGomhXGKB5qlWnBoSDg2YiivaGAA"
alt="Elva dressed as a fairy" /> -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quibusdam, quas voluptate sunt eveniet eius, itaque molestias laborum repudiandae officiis accusamus facilis mollitia magnam eligendi harum porro, nihil in suscipit!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Modi, corrupti quasi minus eos deserunt rem rerum possimus, temporibus magni consectetur illo sed cum, id vitae. Deserunt voluptatem nemo quidem nesciunt?</p>
<img
is="blurrid-image"
sizes="(max-width: 600px) 480px,
800px"
data-src="https://images.unsplash.com/photo-1682687220640-9d3b11ca30e5?q=80&w=640&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
data-loading="onclick"
data-blurrid="AoADvwsQiUAjXIKiZ0-zOUClBryA1QzQpGCpEcweHCn3EjBKofn5wt0QA4FMKQcJAUCSK91pIBQnEXrmaQEgRAGaE0wzPCSGRIG5nGomhXGKB5qlWnBoSDg2YiivaGAA"
alt="Elva dressed as a fairy" />
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis natus illo ipsa mollitia tenetur ipsum facilis, nihil perferendis tempora eius, incidunt dolor quasi optio blanditiis nisi consequatur odio ab quidem!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque dolor eos, deleniti corrupti tempore, enim natus sunt sit maxime saepe quos ut debitis! Facilis, numquam? Voluptatum ipsa autem aliquid doloremque?</p>
<img
is="blurrid-image"
sizes="(max-width: 600px) 480px,
800px"
data-src="https://images.unsplash.com/photo-1682687220640-9d3b11ca30e5?q=80&w=640&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
data-loading="onclick"
data-blurrid="AoADvxYgiUARnyCcS_TzmccCig16gMqDNZSKCkdDjB8OCo7hJEJaY9nc4rZiAFQU4UwOCUCQJMWN10cAaE0SvLjNgA0BEgMXbJUxnkkRFJIZzPGkTIUYwwHzSkrZ4OhHGw3MIUK-0GUZIM7UOy-KVdiqMGyRSboD8ziMTQCkpXOIroxsCMDx-WflUrQHhJsyK9hjeQ4iDTY7zFMMmb9s6txVcgKGBuhMQoImroZIiFadjjPhVSDgxelR5-PwjDYQ"
alt="Elva dressed as a fairy" />
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam officia tempora aut blanditiis? Illum inventore mollitia consectetur error rerum rem, adipisci eligendi tempore asperiores excepturi animi temporibus numquam nesciunt fugiat.</p>
<script type="module" src="../scripts/index.js"></script>
</body>
</html>