Moderna imagen preparada para retina Lazy Loader-lazyestload. js

Vista prévia

Descripción

Una biblioteca JavaScript de carga diferida de imagen moderna, rápida y ligera que proporciona 2 métodos para cargar imágenes perezosas con compatibilidad con imágenes retina e interactivas.

• lazyestload. js: Cargue imágenes solo cuando se encuentran dentro de 100 PX y permanecen en la ventanilla, y cuando el usuario ha dejado de desplazarse
• LazyLoad. js: Lazyloader tradicional – las imágenes se cargan cuando están dentro de 100px de la parte inferior de la pantalla.

Funcionamiento

Cargue la biblioteca ' lazyestload. js ' o ' LazyLoad. js ' en el documento HTML.

<script src="js/lazyestload.min.js"></script>

Agregue la clase ' lazyestload ' a la etiqueta Image.

• src: la ruta de acceso al marcador de posición.
• Data-src: la ruta de la imagen a la carga diferida

<img class="lazyestload" src="placeholder.jpg" data-src="image.jpg" >

La biblioteca también es compatible con la imagen retina/responsive y la etiqueta ' Picture '.

<img class="lazyestload" src="placeholder.jpg" data-srcset="image-1x.jpg 1x, image-2x.jpg 2x, image.jpg 3x" >
<img class="lazyestload" src="placeholder.jpg" data-srcset="images.jpg 300w, images.jpg 800w" >

<picture>

<source media="(max-width: 300px)" data-srcset="image-sm.jpg" >

<source media="(max-width: 1200px)" data-srcset="image.jpg" >

<img class="lazyestload" src="placeholder.jpg" >
</picture>