Lazy Load Nasıl Kullanılır

Selamlar arkadaşlar bu konumuzda lazy load kullanımından bahsedeceğim.Peki bunu neden kullanmamız gerekiyor.Çok fazla resim bulunan web sitelerimizde resimlerin çokluğundan dolayı sayfalarımız ister istemez geç yüklenmektedir.Bundan dolayı lazy load kullanmamız gerekebilir.Tabi size kalmış kullanmayada bilirsiniz.

Kullanımı öncelikle lazyload kütüphanemizi dahil ediyoruz.

https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js

<?php

<script src="/lazyload.js" type="text/javascript"></script>

Lazy load uygulamak istediğimiz resimlerimizi aşağıdaki formatta çağırıyoruz.
class: lazyload uygulamak istediğimiz resimlere “lazyload” classını da ekliyoruz.
src: buraya asıl resim yuklenmeden basılacak olan resmin yolunu veriyoruz.
data-original: burada ise asıl resmimizin yolunu veriyoruz.

<?php

<img class="resim lazyload " alt="Resim açıklaması" src="/images/blank.gif" data-original="/images/original-resim.jpg"  />

Body tagımızı kapatmadan hemen önce jquery kütüphanemizdeki lazyload fonksiyonumuzu çağırıyoruz.

<script type="text/javascript" charset="utf-8"> $(function () { $(".lazyload").lazyload();});</script>

Sonraki konuda görüşmek üzere
Kanalıma abone olmayı unutmayın 🙂..