La imagen animada Lazy Loader con imagen rota de reserva-rogano-Lazy

Vista prévia

Descripción

rogano-Lazy es un cargador perezoso de imagen moderna escrito en JavaScript puro sin ninguna dependencia 3rd.

El cargador perezoso de imagen le permite definir una clase CSS personalizada para la URL de imagen rota para que pueda personalizar la imagen de reserva cuando proporcione una imagen no válida.

También viene con 5 animaciones de fantasía que se pueden utilizar para animar imágenes cuando se desplaza a la vista.

Funcionamiento

Inserte los archivos JavaScript y CSS del rogano-Lazy en el archivo HTML.

<link rel="stylesheet" href="roganolazy.css">
<script src="lazy-roga.min.js"></script>

Inserte una imagen de marcador de posición en la página y especifique la ruta a la imagen original en el atributo Data-src :

<img data-src="img/1.png" src="img/placeholder.png">

Agregue los rogano-Lazy y Lazy-Broken clases a la imagen.

<img data-src="img/1.png" src="img/placeholder.png" class="rogano-lazy lazy-Roto">

Agregue una clase de animación a la imagen.

• . Lazy-fade
• . Lazy-Half
• . Lazy-translate
• . Lazy-Folder
• . Lazy-Scale

<img data-src="img/1.png" src="img/placeholder.png" class="rogano-lazy lazy-Roto lazy-folder">

Especifique la clase de reserva en el atributo Data-src :

• Desenlazar
• Roto

<img data-src="img/1.png" src="img/placeholder.png" class="rogano-lazy lazy-Roto lazy-folder" data-Roto="Desenlazar">

Inicializar el rogano-Lazy y hecho.

document.addEventListener('DOMContentLoaded', function(){

let _lazy = new Lazy();
});