Inicia sesión



Carga lenta de imágenesComo hablamos en el tutorial anterior sobre la carga diferida de imágenes y videos, comúnmente llamado imágenes perezosas o carga de imágenes lentas. Es decir, carga lenta, retrasar la carga de imágenes hasta que el usuario se desplace hacia ellas
En los próximos ejemplo utilizaremos el Lazy Load - jаvascript plugin for lazy loading images - Carga diferida: complemento de jаvascript para imágenes de carga diferida de Mika Tuupola.
Lazy Load retrasa la carga de imágenes en páginas web largas. Las imágenes fuera de la ventana gráfica no se cargan hasta que el usuario se desplaza hacia ellas. Esto es lo opuesto a la precarga de imágenes. El uso de Lazy Load en páginas web largas hará que la página se cargue más rápido. En algunos casos, también puede ayudar a reducir la carga del servidor.

Esta es una versión jаvascript vainilla moderna del complemento original de Lazy Load. Utiliza la API Intersection Observer para observar cuándo la imagen ingresa a la ventana de visualización del navegador. El código original fue inspirado por la utilidad YUI ImageLoader de Matt Mlinac. La nueva versión se presta en gran medida de una publicación de blog de Dean Hume.

Uso básico


Por defecto, Lazy Load supone que la URL de la imagen original de alta resolución se puede encontrar en el atributo data-src. También puede incluir un marcador de posición opcional de baja resolución en el atributo src.

Las imágenes debajo del pliegue (las más bajas que la parte inferior de la ventana) no se cargan. Al desplazarse hacia abajo, se cargan cuando es necesario. Vaciar el caché y volver a cargar para probar nuevamente.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lazyload.js"></script>
<img class="lazyload" src="thumbnail/example.webp" data-src="example.webp" />
window.addEventListener("load", function(event) {
    lazyload();
});
Ver ejemplo básico.

Imágenes borrosas


Marcador de posición de baja resolución, es decir. La técnica de "desenfoque". Puedes ver esto en acción Aquí... Desplácese hacia abajo para ver imágenes borrosas.
<img class="lazyload" src="thumbnail.webp" data-src="original.webp" width="1024" height="768" />
<div class="lazyload" style="background-image: url('thumbnail.webp')" data-src="original.webp" />
En pocas palabras es la misma técnica que la anterior pero en el src se coloca una imagen de baja calidad se puedes utilizar imagenes svg, imagen en URI de datos. Bueno la que mejor se adapte a vuestro trabajo.

jQuery


Si usa jQuery, hay un contenedor que puede usar con la sintaxis antigua conocida. Tenga en cuenta que para proporcionar BC se usa data-original por defecto. Esto debería ser una caída en el reemplazo de la versión anterior del complemento.
<img class="lazyload" data-original="img/example.webp" width="765" height="574">
<img class="lazyload" src="img/example-thumb.webp" data-original="img/example.webp" width="765" height="574">
$("img.lazyload").lazyload();

Te sugiero seguir leyendo...

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-10-12
  • Categorias: Diseño Web html5 javascript WebSite webmasters Noticias Tutorial

Carga lenta de imágenes Carga lenta de imágenes...
Tutoriales en linea
¿Te gusta el tutorial?




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!