Tailwind CSS ve JavaScript ile Tembel Yüklemeli Görüntü Galerisi

Tailwind CSS ve JavaScript ile Tembel Yüklemeli Görüntü Galerisi

Merhaba! Fatih Soysal olarak, bugün size performansı artırmak için olmazsa olmaz olan tembel yüklemeli (lazy loading) bir görüntü galerisi nasıl oluşturulacağını göstereceğim. Bu tekniği kullanarak, web sitenizin hızlı yüklenmesini sağlayabilir ve kullanıcı deneyimini önemli ölçüde iyileştirebilirsiniz. Ayrıca, SEO açısından da büyük avantajlar elde edeceksiniz.

Öncelikle, temel HTML yapımızı oluşturalım. Her bir görüntü için, src yerine data-src özniteliğini kullanarak görüntünün gerçek URL’sini saklayacağız. Bu sayede, sayfa ilk yüklendiğinde tarayıcı bu görüntüleri indirmeyecektir.

<div class="grid grid-cols-3 gap-4">
  <img class="lazyload" data-src="image1.jpg" alt="Görüntü 1">
  <img class="lazyload" data-src="image2.jpg" alt="Görüntü 2">
  <img class="lazyload" data-src="image3.jpg" alt="Görüntü 3">
  <!-- Daha fazla görüntü -->
</div>

Şimdi ise, Tailwind CSS ile galerimizi şekillendirelim. Yukarıdaki HTML kodunda, grid ve gap sınıflarını kullanarak düzenli bir görüntü düzeni oluşturduk. İhtiyaçlarınıza göre bu stili özelleştirebilirsiniz.

Son olarak, JavaScript ile tembel yükleme işlemini gerçekleştireceğiz. Aşağıdaki kod, sayfadaki tüm .lazyload sınıfına sahip img elementlerini tespit eder ve viewport’a girdiklerinde src özniteliklerini data-src öznitelikleriyle değiştirir. Bu sayede, görüntüler ancak görünür hale geldiklerinde yüklenir.

const lazyImages = document.querySelectorAll(".lazyload");

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

lazyImages.forEach((img) => {
  observer.observe(img);
});

Bu kod parçasında, Intersection Observer API’sini kullandık. Bu API, bir elementin viewport’a girip çıkmasını tespit etmemizi sağlar. Bu sayede, yalnızca görünür olan görüntüler yüklenir ve performans en üst düzeye çıkarılır. Daha detaylı bilgi için MDN dökümanlarını inceleyebilirsiniz.

Bu basit adımlarla, hızlı ve performanslı bir tembel yüklemeli görüntü galerisi oluşturmuş olduk. Bu tekniği kendi projelerinizde kullanarak web sitenizin hızını ve kullanıcı deneyimini iyileştirebilirsiniz. Daha fazla web geliştirme ipucu ve bilgi için kendi web sitemi ziyaret edebilirsiniz.

Unutmayın ki, görüntülerin boyutlarını optimize etmek ve uygun bir dosya formatı seçmek de performansı artırmada önemlidir. Bu konuda daha fazla bilgi için ilgili kaynakları araştırabilirsiniz.

#Etiketler
tembel yükleme, lazy loading, görüntü galerisi, image gallery, Tailwind CSS, JavaScript, performans, SEO, web geliştirme