Skip to content

Instantly share code, notes, and snippets.

@parzibyte

parzibyte/index.html

Created August 8, 2019 01:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save parzibyte/79c552b67b68c3303934425f88a37534 to your computer and use it in GitHub Desktop.
Save parzibyte/79c552b67b68c3303934425f88a37534 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Lazy Loading de imágenes con Intersection Observer API</title>
</head>
<style>
h1{
font-size: 3em;
}
p{
font-size: 1.4em;
}
</style>
<body>
<!-- Este div se repetirá en el verdadero proyecto, con imágenes distintas -->
<div>
<h1>Este es el título</h1>
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati similique illo amet natus, atque doloremque quos sunt officia eligendi, officiis fugiat possimus inventore. Dolor itaque, libero, delectus tenetur doloremque earum.</span>
<span>Commodi dolor vel labore neque maiores, odio doloremque similique sequi modi. Quod cumque, sunt, vero dignissimos debitis facere reiciendis tenetur fugit modi, placeat nostrum iure sint assumenda. Temporibus, minus, alias!</span>
<span>Blanditiis quo, adipisci consequuntur beatae fugiat rerum, optio? Dignissimos porro at nihil cupiditate, libero dicta ratione. Provident, qui expedita iure. Sunt temporibus quae dignissimos, sed saepe numquam modi ipsa dicta.</span>
<span>Nobis nam sequi, maiores est vitae soluta at, suscipit molestiae enim a! Consequatur, ipsam. Nesciunt ea ullam neque illum, veritatis laborum eos laudantium ipsum necessitatibus nostrum quae quod omnis eum!</span>
<span>Qui iusto eum similique distinctio nihil aut odio quibusdam tempora tempore beatae ad perferendis, natus, illum praesentium iste placeat mollitia sed deserunt totam autem ab suscipit, ea obcaecati. Eveniet, sed.</span>
<br>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati similique illo amet natus, atque doloremque quos sunt officia eligendi, officiis fugiat possimus inventore. Dolor itaque, libero, delectus tenetur doloremque earum.</span>
<span>Commodi dolor vel labore neque maiores, odio doloremque similique sequi modi. Quod cumque, sunt, vero dignissimos debitis facere reiciendis tenetur fugit modi, placeat nostrum iure sint assumenda. Temporibus, minus, alias!</span>
<span>Blanditiis quo, adipisci consequuntur beatae fugiat rerum, optio? Dignissimos porro at nihil cupiditate, libero dicta ratione. Provident, qui expedita iure. Sunt temporibus quae dignissimos, sed saepe numquam modi ipsa dicta.</span>
<span>Nobis nam sequi, maiores est vitae soluta at, suscipit molestiae enim a! Consequatur, ipsam. Nesciunt ea ullam neque illum, veritatis laborum eos laudantium ipsum necessitatibus nostrum quae quod omnis eum!</span>
<span>Qui iusto eum similique distinctio nihil aut odio quibusdam tempora tempore beatae ad perferendis, natus, illum praesentium iste placeat mollitia sed deserunt totam autem ab suscipit, ea obcaecati. Eveniet, sed.</span>
<br>
</p>
<img class="lazy-loading" src="" data-src="https://picsum.photos/200" alt="Una imagen">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment