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>

JQuery Yön Tuşları ile Navigasyon

yön tuşları, sağ, sol, navigasyon

Özellikle galeri benzeri resimleri listelediğimiz uygulamalarda, kullanıcılar yön tuşları ile gezmeyi seviyor.
Bu küçük script ile sağ ve sol yöntuşlarını aktif hale getirebilirsiniz.


<script type="text/javascript">

    $(document).ready(function () {
        $("body").keydown(function (e) {

                if (e.keyCode == 37) { 
                    window.location.replace("/<%=onceki_url%>/");
                }
                else if (e.keyCode == 39) { 
                    window.location.replace("/<%=sonraki_url%>/");
                }

        });

    });
</script>

JQuery ile HTML İçerik Değiştirme

JQuery ile HTML içeriğini değiştirmek , başına , sonuna, al ve üst satırlarına ekleme yapabilmek mümkün:

Bu özellikler:

$(“.s1″).html(” Yeni yazı. “);
//s1 classına ait tüm nesnelerin içeriklerini “Yeni yazı.” yapar.

$(“.s1”).append(“Sonuna Ekle. “);
//s1 classına ait tüm nesnelerin sonuna ekler.

$(“.s1”).prepend(“Başına Ekle. “);
//s1 classına ait tüm nesnelerin başına ekler.

$(“.s1”).before(“Üst Satıra Ekle. “);
//s1 classına ait tüm nesnelerin üst satırına ekler.

$(“.s1”).after(“Alt Satıra Ekle. “);
//s1 classına ait tüm nesnelerin alt satırına ekler.


<html>
<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>

$(document).ready(function () {

$("#menu").mouseover(function () {
$("#menu").html("İçerik Değişti. Şimdi Üzerime Bolca Tıkla..");
});

$("#menu").click(function () {
$("#menu").after("Ekledin.");
});

});

</script>

</head>

<body>
<div id="menu" class="s1">Üzerine gel</div>
</body>

</html>

JQuery Elemanlara Sınıf Ekleme

JQuery ile elemanların classlarını düzenleyebiliyoruz.
Class ekleyip, silerek o class’a ait özelikleri elemanımıza aktarmış oluyoruz.
Aynı anda birden fazla class ekleyip, silmek mümkün.


<html>
<head>
<style>
.sınıf1 {color:red }
.sınıf2 { background:yellow; }
.sınıf3 { background:gray; color:pink; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>

$(document).ready(function () {
//Menu id'li elemana Sınıf 3'ün özellikleri eklenecek
$("#menu").mouseover(function () {
$("#menu").addClass("sınıf3");
$("#menu").removeClass("sınıf1 sınıf2");
});

//Menu id'li elemana Sınıf 3'ün özellikleri eklenecek
$("#menu").mouseout(function () {
$("#menu").removeClass("sınıf3").addClass("sınıf1 sınıf2");
});
});

</script>

</head>

<body>
<div id="menu" class="sınıf1 sınıf2">Değişecek Yazı</div>
</body>

</html>

jQuery Üzerine Gelince Gösterme

Açılır menülerimizde, üzerine gelince menümüzü göstermek için ya da herhangi bir nedenle bir olay sonucu başka bir nesneyi gizlemek için j’Queryden yararlanabilriz.


$(document).ready(function () {
    $("#gel").mouseover(function () 
      { $("#menu").css('visibility', 'visible'); }); 

    $("#gel").mouseout(function () 
      { $("#menu").css('visibility', 'hidden'); });
});

Bu örnekte gel id’li elementin üzerine gelindiği zaman menu id’li element görünür olacak, üzerinden gidildiğinde ise tekrar gizli hale geçecektir.