() translation by (you can also view the original English article)
El proyecto de Google "Accelerated Mobile Pages" (AMP) ha ayudado últimamente a influir en los sitios web para que se vuelvan más rápidos. Con una buena técnica y una potente red de distribución de contenido, Google ha hecho directamente que los sitios mejorados con AMP sean más rápidos. Sin embargo, AMP también ha trabajado indirectamente, animándonos a examinar las optimizaciones y las mejores prácticas que contiene AMP. Incluso aunque no estés pensando en hacer que tu sitio web cumpla con las normas AMP, es útil entender AMP como una lista de tareas de optimización para un sitio web que no sea AMP.
Una de las optimizaciones de esta lista es una técnica llamada "carga diferida", la cual vimos en acción en nuestro reciente artículo sobre el uso del elemento personalizado <amp-img> de AMP. Con esta técnica, cuando un visitante llegue por primera vez a una página solo se cargarán las imágenes dentro o próximas a la ventana gráfica. El resto se activan para ir cargándose a medida que el visitante se desplace hacia abajo.
La carga diferida permite a un visitante comenzar a interactuar con el contenido antes, y la velocidad de carga mejorada puede aumentar tus posicionamientos en los motores de búsqueda. Cuantas más imágenes tengas en una página, mayores serán las mejoras de velocidad que obtengas.
En este tutorial vamos a ver cómo puedes implementar la carga diferida en sitios web que no son AMP mediante un script denominado Layzr.js. Vamos a replicar la funcionalidad del elemento AMP <amp-img> lo más fielmente posible, pero también trabajaremos con algunas de las características específicas de Layzr.
¡Empecemos!
1. Configuración básica
Como parte del artículo "Proyecto AMP: ¿Hará tus sitios más rápidos?" He creado un diseño básico que contiene cinco imágenes. Para permitirte realizar comparaciones entre el uso de AMP y la implementación de la carga diferida por ti mismo, volveremos a recrear este mismo diseño con cinco imágenes. Más adelante en esta tutorial te mostraré cómo realizar varias pruebas de velocidad de carga.
En los archivos de origen adjuntos a este tutorial encontrarás la versión AMP del diseño y la versión completa de lo que vamos a hacer aquí. Ambos están incluidos para ayudarte a decidir qué enfoque se adapta mejor a ti.
A medida que recorremos todo lo que recomiendo probar tu trabajo usando Chrome Developer Tools (F12) con la pestaña Network abierta, y la casilla Disable cache activada y la limitación establecida en Regular 3G. Esto simula una conexión móvil promedio, mostrándote un gráfico de cada carga de imagen en tiempo real, y te ayudará a obtener una visión clara de cómo está funcionando tu carga diferida.
Al actualizar la página para las pruebas, mantén pulsado el botón de recarga, que hará que aparezca un menú desplegable con diferentes opciones. Elige Vaciar la caché y volver a cargar de manera forzada para simular por completo la visita de un usuario que llega a tu sitio por primera vez.
Crear shell HTML
Empecemos por entender los conceptos básicos. En primer lugar, crea una carpeta para alojar el proyecto y, dentro de ella, crea un archivo denominado index.html.
Abrelo para editarlo y añadir el siguiente código:
1 |
<!doctype html>
|
2 |
<html lang="en"> |
3 |
<head>
|
4 |
<meta charset="utf-8"> |
5 |
<title>Layzr.js Lazy Loading</title> |
6 |
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> |
7 |
<style>
|
8 |
body { |
9 |
margin: 0; |
10 |
}
|
11 |
img { |
12 |
display: block; |
13 |
margin: 0 auto; |
14 |
}
|
15 |
</style>
|
16 |
</head>
|
17 |
<body>
|
18 |
<h1>Welcome to the lazy loaded web</h1> |
19 |
|
20 |
|
21 |
|
22 |
</body>
|
23 |
</html>
|
Con el anterior código, solo estamos obteniendo un shell HTML en su lugar, e incluyendo un poco de CSS para asegurar que el body de la página y las imágenes no tengan ningún hueco inesperado a su alrededor.
También estamos incluyendo margin: 0 auto; por lo que las imágenes que añadimos más tarde estarán centradas.
Cargar Layzr
El script layzr.js tiene dos convenientes fuentes CDN desde las que puedes cargarlo: usaremos una procedente de Cloudfare.
Agregue este código a tu html, antes de la etiqueta de cierre </body>.
1 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/layzr.js/2.0.2/layzr.min.js"></script> |
Si prefieres no cargar el script desde una red CDN, en su lugar puedes descargarlo y seguir las breves instrucciones que encontrarás en: https://github.com/callmecavs/layzr.js#download
Crear instancia de Layzr
Ahora que tenemos Layzr cargado, tenemos que hacer que se ejecute cuando la página se cargue. Para ello, añade este código después de las etiquetas de script que acabas de insertar en la sección anterior:
1 |
<script>
|
2 |
const instance = Layzr() |
3 |
|
4 |
document.addEventListener('DOMContentLoaded', function(event){ |
5 |
instance.update().check().handlers(true) |
6 |
})
|
7 |
</script>
|
Este código crea primero una instancia que se utiliza para contener Layzr y, a continuación, una vez que se ha cargado el contenido DOM de la página, utiliza esa instancia para activar la funcionalidad de Layzr.
En general el código hasta ahora debería tener este aspecto:
1 |
<!doctype html>
|
2 |
<html lang="en"> |
3 |
<head>
|
4 |
<meta charset="utf-8"> |
5 |
<title>Layzr.js Lazy Loading</title> |
6 |
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> |
7 |
<style>
|
8 |
body { |
9 |
margin: 0; |
10 |
}
|
11 |
img { |
12 |
display: block; |
13 |
margin: 0 auto; |
14 |
}
|
15 |
</style>
|
16 |
</head>
|
17 |
<body>
|
18 |
<h1>Welcome to the lazy loaded web</h1> |
19 |
|
20 |
|
21 |
|
22 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/layzr.js/2.0.2/layzr.min.js"></script> |
23 |
<script>
|
24 |
const instance = Layzr() |
25 |
|
26 |
document.addEventListener('DOMContentLoaded', function(event){ |
27 |
instance.update().check().handlers(true) |
28 |
})
|
29 |
</script>
|
30 |
|
31 |
</body>
|
32 |
</html>
|
2. Añadir imágenes (resolución normal)
Con Layzr cargado y listo para funcionar, podemos empezar a añadir algunas imágenes para que haga su magia. Puedes utilizar cualquier imagen que desees, sin embargo, si deseas utilizar los ejemplos de código exactos que verás en los siguientes pasos, puedes descargar los archivos de origen adjuntos a este tutorial. Allí encontrarás una carpeta de imágenes que podrás copiar y pegar en tu propio proyecto.
Para añadir imágenes usando Layzr usarás un elemento img normal, pero en lugar de usar el atributo src usarás data-normal de la siguiente manera:
1 |
<img data-normal="images/vulture.jpg" alt="Vulture"> |
Asegurar que las imágenes tengan altura
Para que cualquier script de carga diferida funcione, necesitas conocer la altura de todas las imágenes de un sitio de forma que puedas decidir cuáles deben cargarse (porque están en la ventana gráfica o cerca de ella) y cuáles deben esperar.
Sin embargo, la parte complicada es que una imagen no tiene ninguna altura hasta que se ha cargado completamente en una página. Esto significa que si queremos que la carga diferida funcione necesitamos una manera de proporcionar a la página información sobre la altura de la imagen antes de que se carguen las imágenes.
Para lograr esto, veremos dos métodos, uno para imágenes de tamaño fijo y otro para las responsivas. Dar altura a las imágenes haciéndolas fijas en tamaño es el método más simple, ya que solo necesita añadir atributos de altura (height) y anchura (width).
1 |
<img data-normal="images/vulture.jpg" alt="Vulture" height="640" width="960"> |
Continúa adelante ahora y añade elementos img por encima de las etiquetas de script, utilizando el atributo data-normal, e incluyendo una altura (height) y una anchura (width), para cada imagen que desees cargar.
1 |
<img data-normal="images/vulture.jpg" alt="Vulture" height="640" width="960"> |
2 |
|
3 |
<img data-normal="images/beach.jpg" alt="Beach" height="640" width="960"> |
4 |
|
5 |
<img data-normal="images/bear.jpg" alt="Bear" height="640" width="960"> |
6 |
|
7 |
<img data-normal="images/sky.jpg" alt="Sky" height="540" width="960"> |
8 |
|
9 |
<img data-normal="images/bike.jpg" alt="Bike" height="540" width="960"> |
Este método de tamaño fijo permitirá que la carga diferida funcione, sin embargo, no permitirá que las imágenes sean responsivas, y esto no es lo ideal. Explicaremos cómo dar a las imágenes una altura y capacidad responsiva un poco más tarde.
3. Establecer un umbral de carga
De forma predeterminada, Layzr sólo proporcionará las imágenes que estén a la vista en el momento de la carga. Sin embargo, los visitantes tienen una experiencia más fluida si las imágenes en la siguientes línea (justo fuera de la ventana gráfica) también están precargadas.
Para ello, establece una opción denominada threshold al crear las instancias del script. La forma en que funciona consiste en que tú proporcionarás un valor que representa un porcentaje de la altura de la ventana gráfica. Si estableces un valor de 100, esto representaría el 100% de la altura de la ventana gráfica, por ejemplo, 1200px. En este caso, también se cargaría algo fuera de la pantalla que estuviese dentro de límite de 1200px de la ventana gráfica.
Por ejemplo, si tuvieras dos grandes imágenes, una de ellas queda insertada justo fuera de la ventana gráfica y el umbral fue establecido en 100, ambas imágenes se cargarían:
Para establecer un valor de umbral, reemplaza esta línea en el código:
1 |
const instance = Layzr() |
... con esto:
1 |
const instance = Layzr({ |
2 |
threshold: 100 |
3 |
})
|
Puedes cambiar este valor a lo que mejor se adapte a los sitios que vayas a crear. Como punto de referencia, parece que el umbral de carga diferida de AMP es aproximadamente equivalente a 200.
4. Añadir imágenes Retina/HiDPI
Una de las grandes cosas de Layzr es que hace que sea muy sencillo añadir imágenes para dispositivos de alta resolución. Todo lo que necesitas hacer es incluir el atributo data-retina. Por ejemplo:
1 |
<img data-normal="images/vulture.jpg" data-retina="images/vulture@2x.jpg" alt="Vulture" height="640" width="960"> |
Actualiza todos los elementos img en tu HTML para incluir imágenes para retina, de la siguiente manera:
1 |
<img data-normal="images/vulture.jpg" data-retina="images/vulture@2x.jpg" alt="Vulture" height="640" width="960"> |
2 |
|
3 |
<img data-normal="images/beach.jpg" data-retina="images/beach@2x.jpg" alt="Beach" height="640" width="960"> |
4 |
|
5 |
<img data-normal="images/bear.jpg" data-retina="images/bear@2x.jpg" alt="Bear" height="640" width="960"> |
6 |
|
7 |
<img data-normal="images/sky.jpg" data-retina="images/sky@2x.jpg" alt="Sky" height="540" width="960"> |
8 |
|
9 |
<img data-normal="images/bike.jpg" data-retina="images/bike@2x.jpg" alt="Bike" height="540" width="960"> |
5. Marcadores de posición de imagen responsivos y prevención de reflujo
Hacer que las imágenes con carga diferida sean responsivas puede ser una propuesta complicada. Como mencionamos anteriormente, con el fin de determinar cuándo cargar imágenes, Layzr necesita conocer primero sus alturas. Debido a que las imágenes responsivas cambian sus dimensiones todo el tiempo, sus alturas son impredecible.
Además de esto, también queremos tener algo en nuestro diseño de página que evite el reflujo. El reflujo sucede cuando una imagen termina de cargarse y pasa de no tener ningún tamaño a ocupar espacio de repente en el diseño, haciendo que todo lo que la rodea se desplace. Esto puede ser muy frustrante para los visitantes que intentan centrarse en tu contenido mientras este salta por la página.
Podemos resolver ambos problemas teniendo en la página marcadores de posición responsivos con el tamaño correcto para cada imagen. Los marcadores de posición se asegurarán de que el diseño de página no tenga que reajustarse y también proporcionarán a Layzr alturas con las que trabajar. Basaremos nuestro enfoque en una técnica ingeniosa de este artículo de Thierry Koblentz en "Crear proporciones intrínsecas para video".
La única salvedad es que necesitarás conocer la proporción de cada imagen que publiques de antemano, ya que el CSS cambiará el tamaño de las imágenes de acuerdo con una proporción especificada.
Añadir un contenedor con proporciones
Lo primero que vamos a hacer es añadir un div contenedor alrededor de nuestra primera imagen: este div se convertirá en nuestro marcador de posición. Vamos a cambiar el tamaño del div en sí con CSS, a continuación, estableceremos la imagen dentro para rellenarlo horizontal y verticalmente.
Vamos a darle al div un nombre de clase que represente la relación de aspecto de la imagen que contendrá. En nuestro ejemplo, la primera imagen tiene 960 píxeles de ancho por 640 píxeles de alto, así que vamos a averiguar cual es el ratio de proporción correspondiente.
640 (nuestra altura) es dos tercios de 960 (nuestra anchura), lo que significa que por cada 2 unidades de altura la imagen tiene 3 unidades de ancho. Los ratios de proporción se expresan típicamente como width:height, como en el caso del conocido 16:9. La relación de nuestra primera imagen de ejemplo es 3:2.
Para representar este ratio de proporción le daremos a nuestro div contenedor el nombre de clase ratio_3_2.
1 |
<div class="ratio_3_2"> |
2 |
<img data-normal="images/vulture.jpg" data-retina="images/vulture@2x.jpg" alt="Vulture" height="640" width="960"> |
3 |
</div>
|
Añadir el estilo de ratio de proporción estándar
Ahora añadiremos el CSS para que todo esto funcione.
Entre las etiquetas <style></style> existentes de la cabecera del archivo index.html, añade este código:
1 |
div[class^="ratio_"]{ |
2 |
position: relative; |
3 |
width: 100%; |
4 |
}
|
Este selector recogerá nuestra clase ratio_3_2, pero también recogerá cualquier otra clase que comience con ratio_. Esto significa que podemos crear más clases más adelante para acomodar diferentes ratios de proporción.
Dentro de este estilo nos aseguramos de que nuestro contenedor siempre se estira al 100% de la anchura de su antecesor. También lo estamos configurando con position: relative; ya que esto posicionará de forma absoluta la imagen dentro de él, verás el porqué un poco más adelante.
Proporcionar la altura del ratio de proporción del contenedor
Ahora añadiremos este código específico únicamente a nuestra clase ratio_3_2:
1 |
.ratio_3_2 { |
2 |
/*padding-top: calc( 100% * (2 / 3) );*/
|
3 |
padding-top: 66.666667%; |
4 |
}
|
El valor de padding-top es lo que nos permite mantener nuestro contenedor div en la proporción de aspecto que queremos. Cualquiera que sea la anchura del div, este relleno (padding) mantendrá la altura en 66.666667% de esa cantidad, (dos tercios), manteniendo así nuestra relación de aspecto 3:2.
Para determinar qué porcentaje poner aquí, averigua cuál es la altura de tu ratio de proporción cuando se expresa como un porcentaje de la anchura. Puedes hacerlo con el siguiente cálculo:
100% * (altura / anchura)
Para nuestra proporción 3:2 sería: 100% * (2 / 3) á 66.666667%
Puedes calcular el porcentaje correcto para tu proporción de aspecto deseada de antemano, o si lo prefieres puedes utilizar la función CSS calc() como se ve comentada en el ejemplo anterior:
padding-top: calc( 100% * (2 / 3) );
Llena el contenedor de proporción de aspecto con una imagen
Nuestro contenedor de proporción de aspecto ahora va a mantener las dimensiones deseadas independientemente del ancho de la ventana gráfica. Así que ahora todo lo que tenemos que hacer es hacer que la imagen contenida en su interior llene el contenedor, heredando así sus dimensiones.
Haremos esto posicionando de forma absoluta cualquier imagen anidada dentro de un div contenedor con clase ratio_, colocándolo en la esquina superior izquierda del contenedor, después estirandolo al 100% de la altura y anchura, de la siguiente forma:
1 |
div[class^="ratio_"] > img { |
2 |
position: absolute; |
3 |
top: 0; |
4 |
left: 0; |
5 |
width: 100%; |
6 |
height: 100%; |
7 |
}
|
Comprueba tu primera imagen, ahora deberías comprobar que se extiende al el ancho de la ventana gráfica, pero se reducirá para ajustarse cuando cambie el tamaño, manteniendo su ratio de proporción todo el tiempo.
Añadir proporciones de aspecto adicionales
Es probable que tengas imágenes con todo tipo de relaciones de proporción diferentes y quierás poder acomodarlas. En las imágenes de ejemplo con las que estamos trabajando en este tutorial, las tres primeras tienen una proporción de aspecto de 3:2, pero la cuarta y la quinta son 16:9.
Para tener en cuenta esto, añade una nueva clase denominada según la proporción de aspecto, es decir, ratio_16_9, con un correspondiente valor de padding-top:
1 |
.ratio_16_9 { |
2 |
/*padding-top: calc( 100% * (9 / 16) );*/
|
3 |
padding-top: 56.25%; |
4 |
}
|
Sigue adelante y añade contenedores div de proporción de aspecto alrededor del resto de las imágenes, usando las clases apropiadas a cada una dependiendo de su tamaño. También puedes eliminar los atributos de altura (height) y anchura (width) de tus imágenes, ya que ahora todas van a ser reemplazadas por nuestro CSS.
1 |
<div class="ratio_3_2"> |
2 |
<img data-normal="images/vulture.jpg" data-retina="images/vulture@2x.jpg" alt="Vulture"> |
3 |
</div>
|
4 |
|
5 |
<div class="ratio_3_2"> |
6 |
<img data-normal="images/beach.jpg" data-retina="images/beach@2x.jpg" alt="Beach"> |
7 |
</div>
|
8 |
|
9 |
<div class="ratio_3_2"> |
10 |
<img data-normal="images/bear.jpg" data-retina="images/bear@2x.jpg" alt="Bear"> |
11 |
</div>
|
12 |
|
13 |
<div class="ratio_16_9"> |
14 |
<img data-normal="images/sky.jpg" data-retina="images/sky@2x.jpg" alt="Sky"> |
15 |
</div>
|
16 |
|
17 |
<div class="ratio_16_9"> |
18 |
<img data-normal="images/bike.jpg" data-retina="images/bike@2x.jpg" alt="Bike"> |
19 |
</div>
|
Vuelve a cargar la vista previa del navegador y cambia el tamaño de la ventana gráfica: ahora debería descubrir que todas tus imágenes responden conservando su funcionalidad de carga diferida, sin reflujo.
6. Añadir srcset
Layzr también admite el atributo srcset. En los navegadores que admitan srcset se utilizará este en preferencia sobre data-normal y data-retina.
Sin embargo, en lugar de usar el atributo srcset directamente, deberíamos anteponerle data-, al igual que los otros atributos que hemos utilizado hasta ahora.
Actualiza el código de tu primera imagen a:
1 |
<img
|
2 |
data-normal="images/vulture.jpg" |
3 |
data-retina="images/vulture@2x.jpg" |
4 |
alt="Vulture" |
5 |
data-srcset="images/vulture_sml.jpg 320w, images/vulture_med.jpg 640w, images/vulture.jpg 960w"> |
Para ver que esto funciona, dirígete a la vista previa de tu navegador, reduce la ventana gráfica a menos de 320px de ancho, vuelve a cargar la página y mira el panel network. Deberías ver primero la versión más pequeña de la carga de imágenes. A continuación, aumenta el tamaño de la ventana gráfica, entonces, a medida que avances, deberías ver la carga de versiones medianas y grandes.
La carpeta images proporcionada en los archivos de origen incluye versiones pequeñas, medianas y grandes de cada imagen. Actualiza el código para usar todos ellos en los atributos data-srcset de la siguiente manera:
1 |
<div class="ratio_3_2"> |
2 |
<img data-normal="images/vulture.jpg" data-retina="images/vulture@2x.jpg" alt="Vulture" data-srcset="images/vulture_sml.jpg 320w, images/vulture_med.jpg 640w, images/vulture.jpg 960w"> |
3 |
</div>
|
4 |
|
5 |
<div class="ratio_3_2"> |
6 |
<img data-normal="images/beach.jpg" data-retina="images/beach@2x.jpg" alt="Beach" data-srcset="images/beach_sml.jpg 320w, images/beach_med.jpg 640w, images/beach.jpg 960w"> |
7 |
</div>
|
8 |
|
9 |
<div class="ratio_3_2"> |
10 |
<img data-normal="images/bear.jpg" data-retina="images/bear@2x.jpg" alt="Bear" data-srcset="images/bear_sml.jpg 320w, images/bear_med.jpg 640w, images/bear.jpg 960w"> |
11 |
</div>
|
12 |
|
13 |
<div class="ratio_16_9"> |
14 |
<img data-normal="images/sky.jpg" data-retina="images/sky@2x.jpg" alt="Sky" data-srcset="images/sky_sml.jpg 320w, images/sky_med.jpg 640w, images/sky.jpg 960w"> |
15 |
</div>
|
16 |
|
17 |
<div class="ratio_16_9"> |
18 |
<img data-normal="images/bike.jpg" data-retina="images/bike@2x.jpg" alt="Bike" data-srcset="images/bike_sml.jpg 320w, images/bike_med.jpg 640w, images/bike.jpg 960w"> |
19 |
</div>
|
Añadir una animación de carga
Ya casi hemos acabado, pero para crear una capa final de pulido vamos a añadir una animación de carga. Esto ayudará a comunicar a los usuarios qué partes del diseño actúan como marcadores de posición de imagen y también que esas imágenes están en proceso de carga.
Vamos a utilizar un cargador CSS puro, una versión ligeramente modificada de esta excelente pen de Alan Shortis: https://codepen.io/alanshortis/pen/eJLVXr
Para evitar necesitar cualquier marcado adicional vamos a hacer que nuestra animación de carga esté contenida en un pseudo-elemento :after adjunto a cada contenedor de proporción de aspecto. Añade lo siguiente a tu CSS:
1 |
div[class^="ratio_"]:after { |
2 |
content: ''; |
3 |
display: block; |
4 |
width: 3rem; |
5 |
height: 3rem; |
6 |
border-radius: 50%; |
7 |
border: .5rem double #444; |
8 |
border-left: .5rem double white; |
9 |
position: absolute; |
10 |
top: calc(50% - 2rem); |
11 |
left: calc(50% - 2rem); |
12 |
animation: spin 0.75s infinite linear; |
13 |
}
|
14 |
@keyframes spin { |
15 |
0% { |
16 |
transform: rotate(0deg); |
17 |
}
|
18 |
100% { |
19 |
transform: rotate(360deg); |
20 |
}
|
21 |
}
|
El código anterior crea un pequeño icono de carga en forma de círculo, lo centra y lo hace girar 360 grados en círculo cada 0,75 segundos.
También vamos a añadir un color de fondo gris oscuro a nuestros contenedores de proporción de aspecto para que se distingan fácilmente del resto del diseño. Añade esta línea de color de fondo, background-color: #333;, de la siguiente manera:
1 |
div[class^="ratio_"]{ |
2 |
position: relative; |
3 |
width: 100%; |
4 |
background-color: #333; |
5 |
}
|
Por último, sólo tenemos que asegurarnos de que nuestro cargador no se posicione sobre la parte superior de nuestras imágenes. Para ello, añadiremos la línea z-index: 1; a nuestras imágenes, desplazándolas a una capa en superior a la de los cargadores:
1 |
div[class^="ratio_"] > img { |
2 |
position: absolute; |
3 |
top: 0; |
4 |
left: 0; |
5 |
width: 100%; |
6 |
height: 100%; |
7 |
z-index: 1; |
8 |
}
|
Actualiza ahora la página, deberías ver la animación de carga en acción.
Tu código final
Con todo lo anterior completado, el código ahora debería tener este aspecto:
1 |
<!doctype html>
|
2 |
<html lang="en"> |
3 |
<head>
|
4 |
<meta charset="utf-8"> |
5 |
<title>Layzr.js Lazy Loading</title> |
6 |
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> |
7 |
<style>
|
8 |
body { |
9 |
margin: 0; |
10 |
}
|
11 |
img { |
12 |
display: block; |
13 |
margin: 0 auto; |
14 |
}
|
15 |
|
16 |
div[class^="ratio_"]{ |
17 |
position: relative; |
18 |
width: 100%; |
19 |
background-color: #333; |
20 |
}
|
21 |
.ratio_3_2 { |
22 |
/*padding-top: calc( 100% * (2 / 3) );*/
|
23 |
padding-top: 66.666667%; |
24 |
}
|
25 |
.ratio_16_9 { |
26 |
/*padding-top: calc( 100% * (9 / 16) );*/
|
27 |
padding-top: 56.25%; |
28 |
}
|
29 |
|
30 |
div[class^="ratio_"] > img { |
31 |
position: absolute; |
32 |
top: 0; |
33 |
left: 0; |
34 |
width: 100%; |
35 |
height: 100%; |
36 |
z-index: 1; |
37 |
}
|
38 |
|
39 |
div[class^="ratio_"]:after { |
40 |
content: ''; |
41 |
display: block; |
42 |
width: 3rem; |
43 |
height: 3rem; |
44 |
border-radius: 50%; |
45 |
border: .5rem double #444; |
46 |
border-left: .5rem double white; |
47 |
position: absolute; |
48 |
top: calc(50% - 2rem); |
49 |
left: calc(50% - 2rem); |
50 |
animation: spin 0.75s infinite linear; |
51 |
}
|
52 |
@keyframes spin { |
53 |
0% { |
54 |
transform: rotate(0deg); |
55 |
}
|
56 |
100% { |
57 |
transform: rotate(360deg); |
58 |
}
|
59 |
}
|
60 |
</style>
|
61 |
</head>
|
62 |
<body>
|
63 |
<h1>Welcome to the lazy loaded web</h1> |
64 |
|
65 |
<div class="ratio_3_2"> |
66 |
<img data-normal="images/vulture.jpg" data-retina="images/vulture@2x.jpg" alt="Vulture" data-srcset="images/vulture_sml.jpg 320w, images/vulture_med.jpg 640w, images/vulture.jpg 960w"> |
67 |
</div>
|
68 |
|
69 |
<div class="ratio_3_2"> |
70 |
<img data-normal="images/beach.jpg" data-retina="images/beach@2x.jpg" alt="Beach" data-srcset="images/beach_sml.jpg 320w, images/beach_med.jpg 640w, images/beach.jpg 960w"> |
71 |
</div>
|
72 |
|
73 |
<div class="ratio_3_2"> |
74 |
<img data-normal="images/bear.jpg" data-retina="images/bear@2x.jpg" alt="Bear" data-srcset="images/bear_sml.jpg 320w, images/bear_med.jpg 640w, images/bear.jpg 960w"> |
75 |
</div>
|
76 |
|
77 |
<div class="ratio_16_9"> |
78 |
<img data-normal="images/sky.jpg" data-retina="images/sky@2x.jpg" alt="Sky" data-srcset="images/sky_sml.jpg 320w, images/sky_med.jpg 640w, images/sky.jpg 960w"> |
79 |
</div>
|
80 |
|
81 |
<div class="ratio_16_9"> |
82 |
<img data-normal="images/bike.jpg" data-retina="images/bike@2x.jpg" alt="Bike" data-srcset="images/bike_sml.jpg 320w, images/bike_med.jpg 640w, images/bike.jpg 960w"> |
83 |
</div>
|
84 |
|
85 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/layzr.js/2.0.2/layzr.min.js"></script> |
86 |
<script>
|
87 |
const instance = Layzr() |
88 |
|
89 |
document.addEventListener('DOMContentLoaded', function(event){ |
90 |
instance.update().check().handlers(true) |
91 |
})
|
92 |
</script>
|
93 |
|
94 |
</body>
|
95 |
</html>
|
Recapitulando
Ahora has implementado completamente a mano la carga diferida, de la forma más similar posible a AMP.
Hay un par de cosas que AMP hace automáticamente, como gestionar la preservación de la proporción de aspecto en imágenes responsivas, pero por otro lado hacer las cosas por ti mismo te permite un control adicional, como especificar tu propio umbral de carga.
Esperemos que el trabajo a lo largo de este proceso te haya ayudado a decidir qué enfoque prefieres.
¡Gracias a Michael Cavalea por un excelente script! Para aprender más sobre Layzr.js visita: https://github.com/callmecavs/layzr.js
