Lazy Load Image Grid — Free HTML CSS JS Snippet

<div class="ll-wrap">
  <h2 class="ll-heading">Scroll to lazy-load images</h2>
  <div class="ll-grid" id="llGrid"></div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; background: #f8fafc; min-height: 100vh; padding: 24px; }

.ll-wrap { max-width: 620px; margin: 0 auto; }
.ll-heading { font-size: 15px; font-weight: 800; color: #1e293b; margin-bottom: 12px; }

.ll-grid {
  max-height: 500px; overflow-y: auto; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; padding: 10px; background: #eef1f6; border-radius: 14px;
}
@media (max-width: 480px) {
  .ll-grid { grid-template-columns: repeat(2, 1fr); }
}

.ll-tile {
  aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden;
  background: linear-gradient(100deg, #e2e8f0 20%, #edf1f6 40%, #e2e8f0 60%);
  background-size: 200% 100%; animation: ll-shimmer 1.4s infinite;
}
.ll-tile img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.4s; }
.ll-tile img.ll-loaded { opacity: 1; }
.ll-tile.ll-done { animation: none; background: none; }

@keyframes ll-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

const grid = document.getElementById('llGrid');

const SEEDS = ['alpha', 'bravo', 'charlie', 'delta', 'echo', 'foxtrot', 'golf', 'hotel', 'india', 'juliet', 'kilo', 'lima'];

SEEDS.forEach((seed, i) => {
  const tile = document.createElement('div');
  tile.className = 'll-tile';
  const img = document.createElement('img');
  img.dataset.src = 'https://picsum.photos/seed/' + seed + '/400/300';
  img.alt = 'Lazy loaded image ' + (i + 1);
  tile.appendChild(img);
  grid.appendChild(tile);
});

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const img = entry.target;
      const tile = img.closest('.ll-tile');
      img.src = img.dataset.src;
      img.addEventListener('load', () => {
        img.classList.add('ll-loaded');
        if (tile) tile.classList.add('ll-done');
      }, { once: true });
      observer.unobserve(img);
    }
  });
}, {
  root: grid,
  rootMargin: '200px',
  threshold: 0.01,
});

grid.querySelectorAll('img[data-src]').forEach((img) => {
  observer.observe(img);
});