Lazy Load, herhangi bir web sayfasında yer alan resim, yazı ve kodların yalnızca ihtiyaç halinde çağrılmasını sağlayan jquery
eklentisidir. Bir siteye giriş yaptığınızı düşünün ve bu web sayfasında
alt alta onlarca resim sıralanmış olsun.
Normal şartlarda resimlerin
hepsi sayfaya girdiğiniz anda yüklenir. Fakat o sayfada Lazy Load
eklentisi varsa resimler/diğer içerikler yalnızca siz alta doğru hareket
ederseniz yüklenir ve böylece gereksiz kaynak tüketimi azaltılır.
Sonuçta gezindiğiniz sayfalar daha hızlı şekilde açılır. Bu durum hem
ziyaretçi hem de botlar tarafından olumlu karşılanır.
Lazy Load neden kullanılmalıdır?
1) Blogunuzun daha hızlı açılmasını sağlar.
Lazy Load neden kullanılmalıdır?
1) Blogunuzun daha hızlı açılmasını sağlar.
2) Blogunuzun ilk açılış süresini hızlandırır.
3) Sunucu rahatlatılır ve site verimliliği artar.
4) Kullanıcılar sayfaları daha hızlı gezinebildikleri için memnun kalır.
5) Görseller çağrıldığında efektle yüklendiği için hoş bir görüntü oluşur.
Görünüm ve optimizasyon açısından çok faydalı olduğu için tüm blogger kullanıcılarına tavsiye ediyorum. Aşağıdaki adımları takip ederek eklentiyi sitenize uygulayabilirsiniz.
Nasıl yapılır?
1) Blogger kumanda panelinize gidin.
2) Gri Yayın Listesi simgesinin yanındaki açılır menüyü tıklayıp Şablon'u seçin.
2) Gri Yayın Listesi simgesinin yanındaki açılır menüyü tıklayıp Şablon'u seçin.
3) "Şu Anda Blog'da" görünümünün altında yer alan HTML'yi Düzenle düğmesini tıklayın.
4) Açılan sayfada CTRL+F komutu ile aşağıdaki kodu bulun.
</head> Yukarıdaki kodu bulduktan sonra hemen üzerine aşağıdaki kodları kopyalayarak yapıştırın.
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js'></script>
<script src="https://googledrive.com/host/0BzkQo7opTBPVV1JGSGhSRjZSNTA" type="text/javascript"></script> <script src="https://googledrive.com/host/0BzkQo7opTBPVRUxwM3FtZDNIam8" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
$(function() {$("img").lazyload({placeholder : "http://3.bp.blogspot.com/-sVYkIZrw5M0/VQa3dZZcWLI/AAAAAAAAAw8/M-vGn2Zx6lY/s1600/grey.gif",effect : "fadeIn"});});
// ]]></script>
<script type="text/javascript">// <![CDATA[
if (window.jstiming) window.jstiming.load.tick('headEnd');
// ]]></script>
Kırmızı ile işaretlediğim jquery api'si
pek çok özelliğin çalışmasında etkili olduğundan daha önceden temanıza
eklenmiş olabilir. Bunu kontrol etmenizde fayda var. Eğer daha önceden
eklenmişse silerek benim verdiğim kodlarla değiştirebilirsiniz.
Hemen ardından temanızı kaydederek çıkın.
