JQUERY - SAYFA AŞAĞI KAYDIKÇA RESİMLERİN YÜKLENMESİ - (LAZY LOAD IMAGES)

Bir çok sitede görmüşsünüzdür sayfayı aşağı doğru kaydırdıkça yüklenen resimleri. Özellikle resimlerin yoğun olarak kullanıldığı, haber, e-ticaret, galeri siteleri gibi. Peki bunu nasıl yapabiliriz.

Resimlerin sayfa aşağı indikçe yüklenmesi için yazılmış bir jquery kütüphanesi mevcut. Öncelikle buradan bu kütüphaneyi indiriyoruz. Tabi kullanabilmek için standart JQuery kütüphanesinide projemize eklemeliyiz.

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

Scriptleri ekledikten sonra kullanacağımız resimleri sayfaya ekliyoruz.

<img class="lazy" data-original="resim1.jpg" heigh="240" src="arkaplan1.jpg" width="320" />
<img class="lazy" data-original="resim2.jpg" heigh="240" src="arkaplan2.jpg" width="320" />
<img class="lazy" data-original="resim3.jpg" heigh="240" src="arkaplan3.jpg" width="320" />
<img class="lazy" data-original="resim4.jpg" heigh="240" src="arkaplan4.jpg" width="320" />

data-original kısmına yüklenecek olan resmin yolunu, src kısmına ise yüklenmeden önce görülecek resmin yolunu veriyoruz.

Resimlere lazy-loading uygulamak için aşağıdaki script kodunu yazıyoruz.

<script>
    $(document).ready(function() {
        $("img.lazy").lazyload({ 
            effect : "fadeIn"
        });
    }
</script>

Lazy-loading, sitesinden diğer ayarlara ve detaylara bakabilirsiniz.

Örnek uygulama