<!-- https://felixicaza.com/blog/optimizar-la-carga-de-imagenes-en-tu-sitio-web-con-placeholders -->

<p>Con este botón simulamos la carga de las imágenes.</p>

<button>Cargar imágenes originales</button>

<section>
  <img width="760" height="571" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/AABEIAAgACgMBEQACEQEDEQH/xAGiAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+gEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/APlK1/4Ls2ek6Jaabonw80O8tYNLht4XTVzpkbTKm1kaNlu5UhA24JBlc5V4oiDX5tS8A51KVJ1fEFwXPqllOHrONO11bmxNJOrfo1FLRuTfun9WVvpNZLCpUdDw7q1V7L3JTz6ph+atzaqSjga9qPL9q8pyenJFangt7/wWR0q7vLu6l+EnhsSXNzPcSD+3J3w80ryON4skD/Mx+YIgbqFXOBzy8AUm0vEGs0m7P+yaEbq/8qxMlH/CpO213udcfpSZPyq/htUTsrpcRSkk7apS/s2N158sb78q2P8A/9k=
" data-src="https://images.pexels.com/photos/3470481/pexels-photo-3470481.jpeg?auto=compress&cs=tinysrgb&w=760" alt="" loading="lazy" />
  <img width="760" height="571" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/AABEIAAgACgMBEQACEQEDEQH/xAGiAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+gEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/APtb4ef8FEv2VdB8BaRoHjL4ufD34k6ncWUWrtdal4S0a88O6RqsRhgifUde8JaPDZafcXDyzNjTIby7tz502oGy03/SX+xq5Zg1iYewxtWhh6lR0qlSi6s6rp8spcypylFyprlSbqTpwu4LWbUT4SjxHifq9SGIwUcRi6dJV6VKvCEKCqc8KfJLEUadSMKi53PlpQqSSU3pBOZ4Bqn/AAUS+Hp1PUTYeOvgLFYG+uzZRRfHO1tI47T7RJ9mjjtPKT7MiQ7FS32L5KgR7V24HoLJOGbLmz3HOVvebylO76u/1nXXr1PPfE3F13ycO5by3fL/AMLtvd6aPAaaW06bH//Z" data-src="https://images.pexels.com/photos/3470872/pexels-photo-3470872.jpeg?auto=compress&cs=tinysrgb&w=760" alt="" loading="lazy" />
  <img width="760" height="428" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/AABEIAAYACgMBEQACEQEDEQH/xAGiAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+gEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/AM39k39or9nP9qnwp4+8KaL+zvJ4C0/TfAdyvjmy/t9LxNWstXguSsGh6jbJb3MV1pmpaba31peatbXaOlxeW/2O3YR3DflGVVMx4fzrAUa+YVsb9Yr1KbjUfPSh7KFJU6kYy5J81/ax/eTrSVOVvaSu0bZrwbwfmWR8S5hw/kcsjxNOhGGNjSzCpBVo4iOLqwdOq6GKa9niKNGfs40KFO8OeMYyion5IarbaLZ6pqVpHBdrHa395bIq/ZdqpBcSRKq/u14CqAOBx2HSv2P27n77pxvL3nZtfFrslZb7LRH864fhvHzw9CUq+C5pUaUpczxtSV3CLfNUlWUqju9ZyScn7zSbP//Z" data-src="https://images.pexels.com/photos/995939/pexels-photo-995939.jpeg?auto=compress&cs=tinysrgb&w=760" alt="" loading="lazy" />
</section>

/* https://felixicaza.com/blog/optimizar-la-carga-de-imagenes-en-tu-sitio-web-con-placeholders */

p {
  font-size: 16px;
  font-family: sans-serif;
}

button {
  padding: 10px 16px;
  background: #4b7bec;
  color: #fff;
  border: none;
  outline: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background 300ms ease;
  font-size: 16px;
}

button:hover {
  background: #1b5bec;
}

section {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 30px;
}

// https://felixicaza.com/blog/optimizar-la-carga-de-imagenes-en-tu-sitio-web-con-placeholders

const button = document.querySelector("button");

// Obtener todas las imágenes que tengan la propiedad loading="lazy"
const imagenes = document.querySelectorAll('img[loading="lazy"]');

window.addEventListener("click", () => {
  // Recorremos todas las imágenes
  imagenes.forEach((imagen) => {
    // Asignamos la propiedad data-src a src para cargar la imágen original
    imagen.src = imagen.dataset.src;
  });
});