jQuery ile lazy load uygulaması

Lazy load aslında, isminden de anlaşılacağı üzere, yükleme ile yavaşlatma veya yavaşlatarak yükleme ya da isteğe göre yavaş yavaş yükleme gibi kelime öbekleri ile ifade edilebilecek jquery destekli bir uygulamadır diyebiliriz. Bir web sayfasında veya bir bilgisayar programında, kullanıcı tarafından istek yapılmadığı sürece, öğenin veya öğelerin yüklenmemesini sağlamak / yüklenmesini geciktirmek amacı ile kullanılır / yapılandırılır.

Lazy load yapısı ile, kullanıcının mouse scrool hareketleri göz önünde bulundurularak, öğelerin çağrılış / yükleniş hareketleri ve durumları geciktirilir.

Açıkçası lazy load tekniği ile, tarayıcıdan çağrılan bir web sayfasında yer alan resimler, o sayfa çağırılmadan yüklenmezler. Dolayısı ile kullanıcı, tüm resim dosyalarını tek seferde yükleyerek sayfanın geç açılmasını beklemek zorunda kalmaz. Ve bu durum, Google Pagespeed ve Google SEO puanını önemli ölçüde etkiler. Varsayılan olarak 100b(bayt) ölçüsünde bir resim sayfa yüklendiğinde kullanıcıya sunulur ve akabinde, belli zaman aralığında (milisaniye cinsinden) asıl resim sayfaya işlenir.

Son zamanlarda sıkça kullanılan lazy load tekniği, özellikle HTML DOM yapısına binayen, sayfa açıldığında tarayıcıya ekstra yük binmesi ile paralel olarak tarayıcının yükünü hafifletmek için oldukça mantıklı ölçüde azaltmaktadır. Aslında bir nevi bu durumda HTML DOM ile alakalı bir durum ancak, bilinçli bir şekilde kurgulanan DOM erişim kuraları ve bu duruma hakim olmanız, kesinlikle doğru sonuca sizi götürecektir. Bu zaten apayrı bir durum, DOM, HTML DOM ile alakalı etraflıca bir makale yazmayı planlıyorum yakın gelecekte, kısmetse durumla alakalı detaylı çalışmayı ve fikir havuzunu oluşturup SEO, semantik web sitesi konularını birlikte bu konu altından konuşacağız. Şimdi konumuza dönelim…

Hali hazırda, fatihtoprak.com ‘un da bu versiyonundan itibaren geçerli olarak kullanmayı düşündüğüm lazy load kullanımının sizlerin de faydalanması için makaleştirmek istedim. Bu uygulamayı kullanırken Alman web geliştiricisi Eisbehr ‘in jQuery Lazy Load plugin‘inden faydalanacağız.

jQuery.Lazy(); geciken resimler eklentisi
Lazy eklentisi, spesifik resimlerin sayfa yüklendikten sonra yüklenmesini sağlamak için geliştirilmiştir. Kullanıcı resimleri mouse’un scrool edilmesi (hareketi) ile sayfada yüklenmesi durumunu belirlemektedir. Bu durum hem sayfanın açılış hızını hem de gereksiz trafik kaybını önleyecek temele dayanır. Kullanımı da oldukça kolaydır.

Kullanımı

Resim / resimlere, data-src= etiketi ile yeni bir özellik ekleyip, lazy class ‘ı atanarak kolayca kullanıma hazır hale getirilir.

<img class="lazy" data-src="yol/resim.jpg" src="yol/bos_resim.jpg" />

Daha sonra, Lazy Load kullanılacak sayfaya jQuery güncel versiyonu ile beraber, lazy load plugini entegre edilir. Konumlandırma sayfa üstünde head bilgisi içinde ya da body tag’i içinde sayfa altında da olabilir.

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

Sayfaya ek olarak çekilen lazy load plugininin konfigürasyonu, sayfa yüklendikten sonra işlem görmesi için document.ready kalıbı içerisinde yazılmalıdır.

jQuery(document).ready(function() {
    jQuery("img.lazy").lazy();
});

Basit kullanım bu şekilde. Ancak eklentinin oldukça kişiselleştirilebilir parametreleri ve konfigürasyon yapısı var. İsterseniz, makalenin devamında, labaratuarda bir kaç örnek yapalım ve kullanımın stabilizasyonu hakkında fikirlerimizi / düşüncelerimizi pekiştirelim.

Uyumluluk

IE 6 da dahil tüm modern tarayıcılar ve mobil tarayıcılar da da stabil bir şekilde çalışan jquery.lazy(); eklentisi kullanım parametreleri ve örneklerini uygulama sayfasında bulabilirsiniz.

Parametreler ve Örnek kullanımlar

Varsayılan – Basit Kullanım ; alttaki gibi tüm lazy class içeriğine sahip resimlerin scroll çekildikçe yüklenmesi ile aktif olacaktır. Çalışan örnek için tıklayınız.

jQuery(document).ready(function() {
    jQuery("img.lazy").lazy();
});

Gecikmeli / zamanlamalı (delay) kullanım

Zaman parametresi işlenerek, bu parametreye milisaniye cinsinden değer eklenerek plugin özelliklerinin aktif olması sağlanabilir. Biz 5 saniye sonra yüklenmesini şu şekilde hazırladık. Çalışan örnek için tıklayınız.

$(document).ready(function() {
	jQuery("img.lazy").lazy({
		delay: 5000,
	});
});

Animasyon (effect) kullanımı

Efektler kullanarak daha şık bir şekilde resimlerin çağırılmasını sağlayabilirsiniz.. Bunun için effect ve effectTime parametrelerini yapılandırmanız yeterli olacak. Çalışan örnek için tıklayınız.

$(document).ready(function() {
	jQuery("img.lazy").lazy({
		effect : 'fadeIn',
		effectTime : '3000',
	});
});

Yükleniyor resmi (loading-image) kullanımı

Resim yüklenirken bir yükleniyor simgesi göstermek için ise, boş resim src yolu yerine yükleniyor resminin kaynak yolunu belirtmeniz yeterli. Çalışan örnek için tıklayınız.

<img class="lazy" src="ajax-loader.gif" data-src="resim/resim.jpg" alt="">

Tüm parametreler ve daha çok detay için resmi siteye ulaşabilirsiniz. Kaynak site burada. Github üzerinden de proje dosyalarını indirebilirsiniz. Sizler için hazırladığım tüm kaynak örnekleri de zip olarak indirip kendi çalışmalarınıza uyarlayabilirsiniz.

İndirmek için tıklayınız.

Kaynak: http://www.fatihtoprak.com/jquery-lazy-load-yapimi.html

Bende kendi sitemde ve geliştirdiğim uygulamalarımda kullanıyorum. Kendileri gerçekten de hayat kurtarıcıdır ayrıca konuyu da açtığınız için çok çok teşekkür ederim.