Paylaş
Frontend

Lazy Load Nedir? En Basit Lazy Load Kurulumu Nasıl Yapılır?

Lazy Load Nedir?

Lazy Load en basit hali ile fotoğrafları önceden yüklemek değil sayfa yüklendikten sonra fotoğrafları yükleyerek sitenin daha hızlı açılmasını sağlamaktadır.

Lazy Load Nasıl Kurulur?

Lazy load bir çok şekilde kurulabilir. Kurulmaktan kastım kodlarınıza eklemeler yapmak. Lazy Load'ın aktif olabilmesi için 3 farklı alana ekleme yapmamız gerekecektir.

İlk olarak CDN üzerinden javascript kodlarımızı çağıralım, bu kodu hangi sayfada veya sayfalarda kullanmak istiyorsanız o sayfanın </body> tagı öncesine eklemeniz gerekmektedir. Genellikle footer gibi site dosyaları vardır tek bir dosyaya ekleyerek tüm sitede görünür hale getirebilirsiniz.

<script type="62c92154cdd8290e7c1c2262-text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.9/jquery.lazy.min.js"></script>
<script type="62c92154cdd8290e7c1c2262-text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.9/jquery.lazy.plugins.min.js"></script>
<script type="62c92154cdd8290e7c1c2262-text/javascript">
    $(function() {
        $('.lazy').Lazy();
    });
</script>

 

Örnek img kodumuz bu şekilde olsun.

<img src="/uploads/composer-ile-laravel-kurulumu.png" alt="">

 

Lazy Load'ın çalışabilmesi için şu şekilde düzenlememiz gerekmektedir

<img class="lazy" data-src="/uploads/composer-ile-laravel-kurulumu.png" src="blank.jpg" alt="">

 

Burada ne yapmış olduk, class="lazy" diye bir parametre ekledik bu sayede burasının bir lazy load destekli bir fotoğraf olduğunu belirledik. Çağırdığımız javascript kodları buradan anlayarak işlemleri yapıyor. data-src"" ekledik normalde bu fotoğraf adresi src="" ile çalışıyordu. Site yüklenirken görünmemesini istediğimiz için ve javascript'in buradan resim adresini alabilmesi için bunu uyguladık. Peki neden src="blank.jpg" var derseniz eğerki bu olmazsa sayfa ilk yüklenirken kırık fotoğraf simgesi görünecektir ve sitede kayma olacaktır. Bunun önüne geçmek için daha küçük boyutlu beyaz bir görsel yükleyerek bunun önüne geçmiş oluruz.

Bu şekilde 1-2 dk içerisinde sitenize Lazy Load eklemiş olursunuz.