De intersección de observador de imagen basada en la biblioteca de carga diferida-IO-LazyLoad

Vista prévia

Descripción

IO-LazyLoad es una biblioteca de JavaScript extremadamente rápida para las imágenes de carga diferida que utiliza IntersectionObserver API para controlar detección de posición de imagen.

Funcionamiento

Incluya el script IntersectionObserver polyfill y IO-LazyLoad en la Página Web.

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>
<script src="iolazy.min.js" defer></script>

Inserte sus imágenes usando el atributo ' Data-src ' y añada la clase ' LazyLoad ' a la etiqueta ' IMG ':

<img data-src="1.jpg" alt="" class="lazyload" >

Inicialice la biblioteca IO-LazyLoad en el documento listo y hecho.

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

new IOlazy();
});

La biblioteca también admite imágenes adaptables mediante el atributo ' srcset '.

<img srcset="320w.jpg 320w,






 480w.jpg 480w,






 800w.jpg 800w"


 sizes="(max-width: 320px) 280px,






(max-width: 480px) 440px,






800px"


 src="placeholder.jpg"


 class="lazyload">

Cambie la clase CSS predeterminada para desencadenar la carga diferida.

new IOlazy({


image: '.lazy'
});

Especifique cuánto será visible la imageshould antes de cargar la imagen.

new IOlazy({


threshold: 0.5
});

Registro de cambios

10/25/2018

• Pasa el margen raíz como un ejemplo de actualización de cadena para usar rootMargin así