Carga diferida de imagen Performant con eventos personalizados-justlazy. js

Vista prévia

Descripción

justlazy. js es un complemento de JavaScript independiente y de alto rendimiento para carga diferida de imágenes con soporte para eventos de desencadenador personalizados como clic, inView, etc.

Funcionamiento

Instale, descargue e importe los siguientes archivos JavaScript y CSS en su documento.

# NPM
$ npm install justlazy --save

<link rel="stylesheet" href="stylesheets/justlazy.css">
<script src="javascript/justlazy.js"></script>

Inserte la imagen que desea cargar perezosa utilizando los siguientes atributos HTML Data :

<div class="load-if-visible-placeholder justlazy-spinner"



data-src="1.jpg"



data-alt="Image Alt"



data-title="Image Title">
</div>

Active el complemento de carga diferida de imágenes y listo. En este caso, la imagen se cargará una vez que se desplaza a la vista.

Justlazy.registerLazyLoadByClass("load-if-visible-placeholder");

Especifique el umbral de en milisegundos que la imagen se cargará XXX píxeles antes de que se convierta en visible en la pantalla.

Justlazy.registerLazyLoadByClass("load-if-visible-placeholder",{

threshold: 300
});

Funciones de devolución de llamada:

Justlazy.registerLazyLoadByClass("load-if-visible-placeholder",{


// Optional callback which is invoked after the image is loaded successfully but before the actual replacement.

onloadCallback: function(){},

















// Optional error handler which is invoked before the actual replacement if the image could not be loaded.

onerrorCallback: function(){},


// Optional callback which is invoked directly after the replacement of the placeholder.

onreplaceCallback: function(){},

















});