Biblioteca de JavaScript Vanilla para la carga diferida de la imagen-vanillaLazyLoad

Vista prévia

Descripción

Sin embargo, otra biblioteca de JavaScript vainilla que ayuda a retrasar la carga de imágenes hasta que se vuelven visibles en la ventanilla. Útil para acelerar los tiempos de carga de la página y disminuir el tráfico. También soporta imágenes de fondo.

Funcionamiento

Primero debe cargar el script Vanilla-lazyloading. js antes de la etiqueta body de cierre:

<script src="js/vanilla-lazyloading.js"></script>

Para cargar de forma diferida una imagen, simplemente especifique la ruta del archivo utilizando el atributo ' Data-vllsrc ' en lugar de ' src '.

<img data-vllsrc="image.jpg">

Lazy cargar una imagen de fondo de la siguiente manera:

<div data-vllsrc="bg.jpg"



data-vlltype="background">
</div>

También puede especificar el desplazamiento para desencadenar el comportamiento de la carga diferida.

<div data-vllsrc="bg.jpg"



data-vlltype="background"


 data-vlloffset="200">
</div>

Más datos atributos:

• datos-vllactionsrc: Cargue imágenes secundarias al interactuar con elementos
• Data-vllblanksrc: Agregue una imagen cuadrada transparente predeterminada. 1 = activar.
• Data-vllclassname: Clase CSS adicional.
• Data-vlloffset: Desplazamiento en píxeles.
• Data-vlltarget: Contenedor de destino.
• Data-vllrespsrc: Para una imagen adaptable.
• Data-vllwaitforload: Reemplace src solo cuando la nueva imagen esté completamente cargada.
• Data-vlltype: "background", "className" o "none". 1 = activar.

Registro de cambios

v0.12.0

• Actualización de JS