Echo.js

1
236
views

lazyload

Bildiğiniz  gibi bazı websayfalarında resim  kaletiesi yüksek olan birçok resim olduğundan sayfa yüklenmesi biraz geç olur. Kimi zaman sayfanın tamamına bile bakmayız ama açtığımız sayfadaki bütün resimler  aynı anda  açılır. Sınırlı bir hostinginiz  varsabu resimler sayesinde bir  aylık limitiniz  bir günde bile bitebilir.  Ayrıca websitenin açılma  hızı  da baya bi düşük olur.

Bazı geliştiriciler  jQuery ile birlikte çalışan bazıeklentiler geliştirmişti. Genel olarak bu eklentiler Lazy Load yani tembel yükleme olarak adlandırılıyor. Bu eklentileri sitenize yerleştirdiğinizde  sadece websitenin tarayıcı ekranında görünen kısmındaki resimler görünürdü. Siz kaydırma çubuğunu aşağı indirdikçe tarayıcı ekranında görünmeye başlayan resimlerde yüklenmeye başlıyordu bu eklentiler sayesinde. Aynı anda bütün resimlerin yüklenmesi durdurulup sadece tarayıcının görünen kısmında olan resimler  yükleniyordu. Bu sayede websitelerin açılma hızıda baya bi yüksek seviyeye gelmiş oluyor.

Todd Motto tarafından geliştirilen Echo.js başka bir JavaScript kütüphanesine ihtiyaç duymadan tek başına bunu yapabilen mini bir javascript kütüphanesidir.  Bu kütüphaneyi kullanabilmek için jquery yüklemenize gerek yok. Tek yapmanız  gereken head etiketleri arasına echo.js dosyasını eklemek.

Bir resmin sayfada görünmesi için bildiğiniz gibi img elementi ile <img src=”resim.jpg”  şeklinde kullanılır.  Geç açılmasını istediğiniz resimlerinizde ise <img src=”blank.gif” eklemeniz gerekiyor. Bu şekilde yaptığınız zaman tarayıcı ekranında ilk blank.gif  açılır ve resmin yüklenmesini sağlar. Tabi bide Echo.js kütüphanesinin hangi resmi yüklemesi gerektiğinide bilmesi gerek. Sadece blank.gif eklemekle Echo.js  hangi resmin yükleneceğini bulamıyor. Bunun için resim data-echo=”resim.jpg” olarak eklemeniz gerekiyor. Sonuç olarak girmeniz  gereken resim kodu <img src=”img/blank.gif” alt=”” data-echo=”img/album-1.jpg”> şeklinde olması gerekiyor.

Echo.js kütüphanesinin javascript kodarını  ve nasıl kullanıldığı hakkındaki daha detaylı bilgiyi buradan edinebilirsiniz.

 

1 Yorum

  1. Peki, bu js kütüphanesini kullandığımızda; fazla görselli ve büyük ölçüde Google görsellerden ziyaretçi çeken internet sitemiz sıralamalardan kaybolmayacak mı? Ban çok iç açıcı bir uygulama gibi gelmedi.

CEVAP VER

Please enter your comment!
Please enter your name here