Lazy Load Nedir? Nasıl Yapılır?

Lazy load, web geliştirmesinde kullanılan bir tekniktir ve sayfa yüklenirken belirli içerikleri, özellikle büyük resimleri veya dosyaları, sayfanın tamamını bekletmeden yüklemek için kullanılır. Bu, sayfanın hızını artırabilir ve kullanıcı deneyimini iyileştirebilir.

Lazy load‘in temel amacı, kullanıcının sayfanın yüklenmesini beklerken önemli içerikleri hemen görmesini sağlamaktır. Özellikle büyük medya dosyalarını veya uzun sayfaları içeren web sitelerinde bu teknik önemli olabilir.

Lazy loading, JavaScript ve HTML’nin bir kombinasyonu kullanılarak gerçekleştirilir. İşte basit bir örnek:

1. HTML ile Lazy Load:
   <img src="placeholder.jpg" data-src="large-image.jpg" loading="lazy" alt="Lazy Loaded Image">


   Yukarıdaki örnekte, data-src özelliği, yüklenmesi geciken büyük resmin gerçek kaynağını belirtir. loading="lazy" özelliği tarayıcıya, bu resmin tembel bir şekilde yüklenmesini (lazy loading) söyler.

2. JavaScript ile Lazy Load: JavaScript kullanarak da lazy loading uygulayabilirsiniz. Örneğin, jQuery kullanarak:
   <img src="placeholder.jpg" class="lazy-load-image" data-src="large-image.jpg" alt="Lazy Loaded Image">
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function() {
$(".lazy-load-image").each(function() {
$(this).attr("src", $(this).data("src"));
});
});
</script>


   Bu örnekte, jQuery kullanılarak sayfa yüklendiğinde, her resmin src özelliği, data-src özelliği ile değiştirilir, bu da resmin yüklenmesini başlatır.

Lazy load, web performansını artırmak ve kullanıcı deneyimini iyileştirmek için yaygın olarak kullanılan bir tekniktir. Ancak, kullanıcıların sayfanın içeriğini hemen görememesine neden olabileceği için dikkatli bir şekilde kullanılmalıdır.