Lazy Load Kullanımı


lazy load jquery kutuphanesi

 

Çok fazla resim listelediğimiz blog, haber ve galeri gibi sayfalarımızda, sayfa yüklenme hızını artırmak için jquery kütüphanesi olan Lazy Load kullanabiliriz.

Çalışma mantığı oldukça basit. İlk olarak sadece ekranda görülen resimler yükleniyor. Scrollbarı aşağı indirdikçe görünmeye başlayan resimler sırayla yükleniyor.

 

Sayfaya Ekleme:
Öncelikle aşağıdaki linkten lazyload.js dosyamızı indiriyoruz.
Lazyload.js Dosyası

 

İndirdiğimiz dosyamızı sayfamıza ekliyoruz.


<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.


<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>
Reklamlar

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s