Imagen inteligente Lazy Load JS Library-Image-defer. js

Vista prévia

Descripción

Image-defer. js es una biblioteca de JavaScript que defer inteligentemente la carga de imágenes para reducir el tiempo de carga de la página y mejorar la UX. licenciado bajo la licencia pública general de GNU Affero v 3.0.

How it works:

• Si se desplaza hacia abajo en su navegador web que deben cargar a petición cuando se desplaza lentamente o detener el desplazamiento. La carga de imágenes debe omitirse mientras se desplaza rápidamente.
• Cuando se alcanza el límite de imagen, las imágenes que están fuera de la pantalla deben comenzar a revertir a su marcador de posición inicial, desde la parte superior si se desplaza hacia abajo, o desde la parte inferior si se desplaza hacia arriba.
• Si cambia el tamaño de la ventana (o rota el dispositivo) para que el diseño de página y la posición de desplazamiento cambian, se deben cargar las imágenes recién visibles y se debe volver a evaluar el límite.
• Si el número de imágenes visibles * excede el límite, el límite será excedido.

Funcionamiento

Incluya el principal JavaScript ' Image-defer. js ' en la página web cuando sea necesario.

<script src="/path/to/image-defer.js" defer></script>

Agregue el marcador de posición a la página web y defina la imagen original en el atributo ' Data-aplazar-src ' como esta:

<img class="defer" src="placeholder.png" data-defer-src="original.jpg">

Pre-definir Imagedeferal usar ' Async ' o ' aplazar ' con < script >:

window.ImageDefer = window.ImageDefer || {};

Establezca las opciones de aplazamiento de imagen:

ImageDefer.options = {

onImageRequested: imageLoading,

onImageLoaded: imageLoaded,

onImageUnloaded: imageUnloaded
};

Responder a eventos de aplazamiento de imagen:

function imageLoading(img) {

removeClass(img, 'loaded');

addClass(img, 'loading');
}
function imageLoaded(img) {

removeClass(img, 'loading');

addClass(img, 'loaded');
}
function imageUnloaded(img) {

removeClass(img, 'loading');

removeClass(img, 'loaded');
}

Todas las opciones predeterminadas y funciones de devolución de llamada.

ImageDefer.options = {


// the maximum number of images to lazy load before starting to unload images again

maxLoaded: 100,


// the time to wait, in milliseconds, before considering that a scrolling event has completed

scrollingStopMillis: 500,


// the speed of scrolling, in pixels/millisecond, above which images will not be lazy loaded

scrollingSkipRate: 0.8


// callback functions

onImageRequested: null,

onImageLoaded: null,

onImageUnloaded: null,


};