Preloader web & librería Lazy Loader-Loader

Vista prévia

Descripción

Loader es una potente biblioteca de JavaScript que se utiliza para precargar o cargar de forma diferida elementos HTML ' pesados ' en la página web, como imágenes, audios, videos, iframes, etc.

Esta es la versión reescrita de la jQuery Nite-preloader plugin que le ayuda a implementar la precarga y funciones de carga diferida sin dependencias.

More Demos:

• < a href = "/demo/preloader-lazy-loader/page-preloader.html" target = "_ blank" rel = "noopener" > preloader demo
• < a href = "/demo/preloader-lazy-loader/urls-preloader.html" target = "_ blank" rel = "noopener" > URL preloader demo

Funcionamiento

Descargue e importe los archivos del cargador en el documento.

<link rel="stylesheet"href="./assets/dist/lazyloader.css">
<script defer src="./assets/dist/lazyloader.js"></script>

Inicializar la biblioteca como un precargador o un cargador perezoso.

// preloader
const myPreloader = new Loader();

// lazy loader
const myLoader = new Loader({



lazy: true
});

Defina una colección de recursos para precargar o cargar de forma diferida.

myPreloader.collection = document.querySelectorAll('img');
// or
myPreloader.collection = document.body;
// or
myPreloader.collection = 'image.jpg';
// or
myPreloader.collection = ['image.jpg', '1.mp3', '2.mp4'];

Inicie la precarga o la carga diferida.

myPreloader.load()
myLoader.load()

Controle el progreso de la carga.

myLoader.progress(resource => console.log(resource.element, 'appeared and loaded.'));

Todas las opciones predeterminadas.

new Loader({



// default data attributes


srcAttributes: {



src: 'data-src',



srcset: 'data-srcset'


},


sizesAttributes: {



sizes: 'data-sizes',



media: 'data-media'


},



// enable/disable background


backgrounds: false,



// for audio/video resources


playthrough: false,





// sequential load or not


sequential: false



});

Registro de cambios

12/05/2018

• CustomEvent polyfill