Jquery için Lazy Load eklentisi.

Bana göre Jquery nin en güzel eklentilerinden bir tanesi. Lazy Load ın ne yaptığı konusunda ilk defa gören arkadaşlar için kısaca bilgi vermek gerekise;

Sitenizde o an sayfa üzerinde bulunan resim dosyalarını yani img tagı ile belirlenmiş olan nesnelerin, hepsini sayfa ile birlikte yüklemektense. Kaydırma çubuğunu dinleyerek sadece aşağıya doğru kaydırdığınızda ekranda görünmesi gereken resimleri anlık olarak yüklüyor…

Şu an blogumda olduğu gibi burada da bir DEMO mevcut!

Faydaları

Günümüzde artık tasarımları yaparken optimizasyon eskisi kadar önemli bir konumda değil yani 300-500k lık resimleri sitelerde görmek mümkün. İlk yükleme anında tüm bu resim dosyalarını yüklemektense kaydırma çubuğu indikçe önümüze gelmesi gereken resimleri anlık olarak yükletmek çok daha mantıklı. İşte bu işe yarıyor lazy load eklentisi. Sonuç olarak sitenize her giren ziyaretçi tüm sayfanızdaki resimleri yüklemektense göreceği kadarını yüklüyor. Hem sayfanız daha hızlı açılıyor hemde sitenizin bandwidth kotası daha az kullanılmış oluyor.

Kullanımı

Lazy Load Jquery Eklentisi ile alakalı güzel bir açıklama nette mevcut ben de sadeleştirerek anlatıyorum kısaca..

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

yukarıdaki kod yardımı ile Jquery ve eklentinin dosyalarını çağırıyoruz …

$("img").lazyload();

ve yine yukarıdaki kod yardımı ile tüm img taglarını yakalıyor ve lazyload(); fonksiyonu ile ilişkilendiriyoruz. Kullanımı bu kadar basit…

Ek olarak belirtmek gerekirse şu an benim de blogumda kullandığım Wordpress Lazy Load eklentisi de mevcut Admin panelinizin eklenti arama kısmında kolayca indirip etkinleştirebilirsiniz.

Gelişmiş ayarlamalarını görmek için konuyu bulduğum ve geniş anlatımının olduğu bu sayfayı ziyaret ediniz. Ayrıca gerekli dosyaları da yine aynı sayfadan edinebilirsiniz.

Rasgele yazılar