Retrasar la carga de imágenes hasta que sea necesario-Lazy-Image

Vista prévia

Descripción

La biblioteca de imágenes perezosas permite cargar fuentes de imágenes a petición (p. ej., clic, en vista, etc.).

Funcionamiento

Cargue el archivo JavaScript Lazy-Image. js en el documento HTML.

<script src="lazy-image.js"></script>

Cargue el < a href = "https://github.com/webcomponents/webcomponentsjs/tree/v1" target = "_ blank" rel = "noopener noreferrer" > webcomponentsjs polyrellenos para los exploradores heredados.

<script src="/path/to/webcomponents-sd-ce.js"></script>

Inserte la imagen y el texto alternativo en el elemento ' Lazy-Image '.

<lazy-image src="1.jpg" alt="alt text" id="demo"></lazy-image>

Retrasar la carga de la imagen hasta que haga clic en el texto alternativo.

demo.addEventListener('click', function() {

if (!this.active)


this.active = true;
});

Retrasar la carga de la imagen hasta que se desplaza a la vista.

// Create an observer.
var observer = new IntersectionObserver(onChange, {

threshold: [0.5]
// rootMargin: '50% 0%'
});

// That observes all the random images we've created.
els.forEach(el => observer.observe(el));

// Whenever we scroll...
function onChange(changes) {

changes.forEach(change => {


var el = change.target;


if (!el.active)



el.active = true;


observer.unobserve(el);
// Don't care anymore.

});
}

Registro de cambios

09/27/2018

• actualización de espacio de nombres de atributo