search

consultoria-sap / consultoria-sap.github.io

Root del repositorio
https://consultoria-sap.github.io
3 stars 0 forks source link

Lazy-Loading #7

Closed SidVal closed 5 years ago

SidVal commented 5 years ago

Para ciertas imágenes quiero poner algún simple script que me ayude a optimizar las cargas de imágenes.

Después de leer: Five Techniques to Lazy Load Images for Website Performance, me quedo con esta idea muy simple, que tengo que probar: Simple Image Lazy Load and Fade

  1. Agregar CSS:
img {
    opacity: 1;
    transition: opacity 0.3s;
}

img[data-src] {
    opacity: 0;
}
  1. Agregar JS:
[].forEach.call(document.querySelectorAll('img[data-src]'), function(img) {
    img.setAttribute('src', img.getAttribute('data-src'));
    img.onload = function() {
        img.removeAttribute('data-src');
    };
});
  1. En la imagen, usar "data-src" y no "src" como siempre: <img data-src="/path/to/image.jpg" alt="">
SidVal commented 5 years ago

Probando aquí: