Web 2.0′ın hayatımıza girmesinin ardından büyük imajlar, slayt gösterileri ve zengin medya içerikleri derken artık normal bir web sayfasının 1,5 – 2 MB lara kadar çıkmasının normal sayıldığı bu günlerde siz de hala web sayfanızın hızından memnun değilseniz fakat tasarım + içeriğin sizleri bir çok imaj dosyasının aynı sayfada bulunması zorunluluğu bıraktığı bir durumdaysanız tam size göre bir eklenti olan lazy load‘u tavsiye ederim.

Lazy load en basit haliyle ifade etmek gerekirse, sayfada görünecek pozisyona gelene kadar bu imajı gösterme kardeşim demenizi sağlıyor. Dolayısıyla, 1500 pixel uzunluğunuzdaki sayfanın yarısında bulunan ve sadece slider’ın ileri butonlarıyla erişilebilen imaj dosyasını site ziyaretçilerimize göstermek zorunda kalmıyoruz. Özellikle mobil sitelerde kullanıcıların veri paketlerini tüketmemek adına kullanılabilecek bu eklenti sayesinde hem sunucu üzerindeki yükü biraz azaltabilir hem de kullanıcılarınızın sitenizin ilk yüklenmesini çok daha hızlı hale getirebilirsiniz.

İlgili eklentiye ve kullanım örneklerine: http://www.appelsiini.net/projects/lazyload adresinden ulaşabilirsiniz. – See more at: http://adobeturk.com/2013/03/faydali-bir-jquery-eklentisi-lazy-load/#sthash.Hqs8EEKi.dpuf

1. Geliştiriciler için açık kütüphaneye buradan , küçültülmüş halini ise buradan indirebilirsiniz.

2. jQuery kütüphanesini (buradan erişebilirsiniz) ve indirdiğimiz Lazy Load kütüphanesini sayfamıza çağrıyoruz

[crayon lang=”javascript”]


[/crayon]

3. Daha sonra lazy loadın fonksiyonunu sayfamıza yazarak JavaScript lik işlemimizi tamamlamış oluyoruz.

[crayon lang=”html”]

[/crayon]

4. Sayfaya çağrılan resimlerin aşagıdaki format gibi olmasına dikkat ediniz.

[crayon lang=”javascript”]

[/crayon]
Asıl resmi data-original=”resimadı.jpg” çağrıyoruz normal src alanına ise isterseniz küçük boyutta bir resima tabilirsiniz 1×1 boyutlarında olabilir.

Artık sayfamız ilk açıldığında ekranınızın gördüğü alandaki resimler açılış esnasında yüklenecek diğer resimler ise aşağı indikçe yüklenecektir.

Gelişmiş Seçenekler

Gelişmiş seçenekler :

1 – FadeIn efekti ile resimlerin yavaşca gelmesini isterseniz ;

[crayon lang=”javascript”]
$(function() {
$(“img”).lazyload({
effect : “fadeIn”
});
});
[/crayon]

2- TimeOut belirtilen saniye sonra ilk açılan hariç diger hepsini tek seferde yüklemek isterseniz bu fonksiyonu kullanmanız yeterli.

[crayon lang=”javascript”]
$(function() {
$(“img”).lazyload({
event : “sporty”
});
});
$(window).bind(“load”, function() {
var timeout = setTimeout(function() { $(“img”).trigger(“sporty”); }, 5000);
});
[/crayon]