En este tutorial vamos a ver cómo implementar lo que en inglés se denomina como Lazy Load de imágenes, o carga lenta de imágenes, utilizando Javascript sobre un proyecto en PHP. Para entender mejor esto, te lo explicaré con un ejemplo. Imagina que la portada de tu web cuenta con cientos de imágenes. Claro, cargar todas esas imágenes hacen que la velocidad de la página se vea resentida- Esto crea malas impresiones entre los visitantes y potencia las tasas de abandono del site.
¿La solución a este problema? Carga menos imágenes en la carga inicial del sitio web. Ojo, con esto no te decimos que reniegues de esas imágenes que tanto adoras, si no que las raciones. Lo mejor es cargar solo aquellas imágenes que se muestran en el viewport, es decir, aquellas que el usuario está viendo en la pantalla.
Como cargar solo las imágenes que el usuario ve en el viewport con Javascript
La técnica de Lazy Load no cargará aquellas imágenes que están fuera del viewport. Por lo tanto, cuando el usuario haga scroll hacia abajo, las imágenes que les toque mostrarse, se irán cargando gradualmente.
Ventajas:
- Incrementa la velocidad de la página, debido a que solo mostramos las imágenes que están en el viewport, no todas las imágenes
- Mejora la experiencia del usuario
- Google da importancia a aquellas páginas que cargan rápido
- Este Javascript es ligero y no requiere librerías adicionales de Javascript como jQuery, mejorando aún más la velocidad de la página.
En este tutorial utilizaremos la librería de Javascript Blazy, que se encargará de la carga lenta de imágenes. Esta librería está completamente desarrollada en Javascript y no tiene dependencias de recursos externos como jQuery.
Paso 1. Crea el fichero index.html y añade un diseño básico en él
Primero crea un nuevo proyecto llamado lazy-load en tu carpeta htdocs/www. Luego crea el fichero index.html y añade el siguiente diseño HTML en él.
<!DOCTYPE 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">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="muni">
<link rel="icon" href="../../favicon.ico">
<title>Lazy Load Images Using JavaScript PHP</title>
</head>
<body>
</body>
</html>Paso 2. Incluye la librería de javascript Blazy
Ahora vamos a incluir la librería blazy para cargar solo aquellas imágenes que se muestren en el viewport. Inclúyela antes del cierre del tag body. Puedes descargarte la librería desde este enlace.
<script src="js/blazy.js"></script>Paso 3. Añade las imágenes e inicializa la librería
Ahora añade el listado de imágenes que quieras mostrar en la página, pero antes, recuerda realizar las siguientes acciones en el tag img para inicializar el Lazy Load
- Primero añade la clase b-lazy a todas las imágenes
- Opcionalmente, añade la imagen placeholder en el src. Es un gif transparente codificado en base64.
- Finalmente introduce la ruta real de la imagen en el atributo data-src
<img class="b-lazy"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-src="images/1.jpg"
alt="Image 1"/>
<img class="b-lazy"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-src="images/2.jpg"
alt="Image 2" />
<img class="b-lazy"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-src="images/3.jpg"
alt="Image 3"/>
<img class="b-lazy"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-src="images/4.jpg"
alt="Image 4"/>
<img class="b-lazy"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-src="images/5.jpg"
alt="Image 5" />
<img class="b-lazy"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-src="images/6.jpg"
alt="Image 6" />
<img class="b-lazy"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-src="images/7.jpg"
alt="Image 7" />Finalmente, inicializa la librería Blazy para cargar solo aquellas imágenes que se muestren en el viewport. Ahora copia y pega el siguiente script antes del cierre del tag body.
<script>
;(function() {
// Initialize
var bLazy = new Blazy();
})();
</script>Con esta técnica, seguro que tus páginas cargan mucho más rápido que antes. Ponlo en práctica y muéstranos tus impresiones en la caja de comentarios de más abajo. ¡Feliz código!
Fuente: smarttutorials.net