Flexible Image Lazy Loader-kit. Lazy. js

Vista prévia

Descripción

Kit. Lazy es una biblioteca de carga diferida de imagen pequeña y sencilla que admite la etiqueta de imagen, la imagen de fondo y la carga de imágenes asincrónicas.

Funcionamiento

Instalación:

# NPM
$ npm install kit.lazy --save

Importe el kit. Lazy. js.

<script src="kit.lazy.js"></script>

Agregue la clase ' kit-Lazy ' a la imagen y especifique la imagen de marcador de posición en el atributo ' src '. El atributo ' Data-src ' se utiliza para definir la ruta a la imagen original que se cargará cuando se desplaza a la vista.

<img class='kit-lazy'


 src='placeholder.jpg'


 data-src='/example.jpg'>

Inicialice la librería kit. Lazy y done.

kit.createLazy();

Para retrasar la carga de una imagen de fondo, siga estos pasos:

<div class="image bgExample kit-lazy">

...
</div>

.image {

width: 100%;

height: 300px;

background: no-repeat center/cover;
}

.bgExample {

background-image: url("placeholder.jpg");
}

.bgExample.loaded {

background-image: url("example.jpg");
}

Para cargar de forma diferida una imagen asincrónicamente.

let image = '<img class="image kit-lazy" src="img-placeholder.jpg" data-src="example.jpg"/>'

document.body.insertAdjacentHTML('beforeend', image);

kit.lazy.load()

Opcionalmente, puede aplicar un efecto de carga personalizado a la imagen antes/después de la carga. En este ejemplo, vamos a crear un efecto de desenfoque de estilo medio en la imagen.

.image {

filter: blur(20px);

transition: background-image ease-in-out 0.5s;
}

.bgExample.loaded {

filter: blur(0);
}