Ali @mintik
2 Temmuz 2020 0:22

Echo.js

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.

 

Bu Yazıyı Paylaş

1 yorum "Echo.js"

  1. Opyg dedi ki:

    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.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

ÜYE GİRİŞİ

Arkadaş ekleme, özel mesaj, kişisel yazı paylaşmak için siteye giriş yapın

Şifremi unuttum? Kayıt Ol!
  • Ali:

    Eskiden paralı değildi. Herhalde popüler olunca paraya yönelmişler....

  • Bozkurt:

    Bu uygulama paralı ama...

  • Ali:

    Pardon Yuyyu olacaktı...

  • Ali:

    Tamam yuyu da olsun :)...

  • Arkadaşlık Uygulaması:

    Yuyyu Online Arkadaşlık Sitesi – Sohbet Et ve Yeni İnsanlarla Tanış Yuy...

  • Araç çubuğuna atla