Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Script para lazyload de images y backgrounds
if ("IntersectionObserver" in window) {
const lazyImages = document.querySelectorAll('[data-src]');
const lazyBGs = document.querySelectorAll('[data-background]');
const options = { threshold: 0 };
const imageObserver = new IntersectionObserver(
(entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const image = entry.target;
image.src = image.dataset.src;
imageObserver.unobserve(image);
}
});
}, options);
const bgObserver = new IntersectionObserver(
(entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const imagebg = entry.target;
imagebg.style.backgroundImage = "url('"+imagebg.dataset.background+"')";
imagebg.classList.add('bg-active');
bgObserver.unobserve(imagebg);
}
});
}, options);
lazyImages.forEach(image => imageObserver.observe(image));
lazyBGs.forEach( imagebg => bgObserver.observe(imagebg));
} else {
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i = 0; i < imgDefer.length; i++) {
if (imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src', imgDefer[i].getAttribute('data-src'));
}
}
}
window.onload = init;
}
@javimata

This comment has been minimized.

Copy link
Owner Author

@javimata javimata commented Nov 21, 2019

¿Como funciona?

Agrega el script al final de tu código, ya sea como un archivo separado o dentro de algún archivo de javascript que ya cargues y de preferencia arriba del mismo.

En el html cambia las etiquetas img por algo así:
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="images/imagen1.jpg" alt="Imagen">

Donde el atributo src cargará una imagen transparente de 1px y cuando está deba ser cargada será sustituida por la imagen indicada en el atributo data-src

Para los fondos, en el elemento a colocarlo debes agregar un atributo data-background con la url de la imagen de fondo, por ejemplo:
<div class="box" data-background="images/background.jpg"><div>

La ruta tanto del data-src como del data-background son relativas al html o absolutas.

OJO
El fondo solo colocará un style dentro de la etiqueta con el css background-image, si requieres que lleve más estilos estos debes colocarlos dentro del css, por ejemplo el background-repeat, background-size, etc...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.