0carga 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 se desplace hacia ellas
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.
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.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.
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.
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 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();
});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" />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();
Comentarios