Cargador de imágenes progresivo en Vanilla JavaScript-Progressive-images

Vista prévia

Descripción

progresivo-Images es una librería de JavaScript vainilla para cargar progresivamente y responsablemente las imágenes apropiadas dependiendo del tamaño de la pantalla actual.

Funcionamiento

Incluya la hoja de estilos necesaria en la Página Web.

<link href="progressive-load.css" rel="stylesheet">

Inserte sus imágenes en la Página Web de la siguiente manera:

<picture class="js-progressive-img">

<!-- tablet image -->

<source



media="(min-width: 600px) and (max-width: 768px)"



srcset="tablet-thumbnail.jpg"



data-srcset="tablet.jpg"

>

<!-- mobile image -->

<source



media="(max-width: 600px)"



srcset="mobile-thumbnail.jpg"



data-srcset="mobile.jpg"

>

<!-- desktop image -->

<img



src="thumbnail.jpg"



data-srcset="1.jpg"



class="progressive-img"

>
</picture>

Incluya el archivo principal de JavaScript ' global. min. js ' en la parte inferior de la Página Web.

<script src="global.min.js"></script>

Active la biblioteca de imágenes progresivas con la configuración predeterminada.

var progresseiveLoadImages = new ProgressiveLoad({


pictureTagClassName: 'js-progressive-img',


pictureLoadedClassName: 'progressive-img-state-loaded',


mediaQueries: ['(max-width: 600px)', '(min-width: 600px) and (max-width: 768px)'],


fullImageDataAttribute: 'srcset',
});