Resimler siteyi açtıkça görünsün LazyLoad

Arkadaşlar bunu blogumu güzelleştirmek için arama yaparken buldum, bu eklentinin faydası bir ziyaretçi sitenize girdiğinde tüm resimlerin yüklenmesini beklemeden sitenizde dolaşmaya başlar, aşağılara indikçe yeni resimler görünür ve o zaman yüklenmeye başlar. Bi nevi siteyi hızlanırıyor diyebiliriz. Şimdi kod kısımlarına geçelim, yapmamız gereken tek şey sitemizin kod kısmında

kodunu bulup peşine aşağıdaki kodları ekliyoruz.

<script charset='utf-8' src='http://mcdmedya.com/file/kr/jquery.min.js' type='text/javascript'></script>
<script src='http://mcdmedya.com/file/kr/jquery.lazyload.js' type='text/javascript'></script>
<script type='text/javascript'>
$(function() {
          $("img").lazyload({
              placeholder : "http://mcdmedya.com/file/kr/grey.gif",
              effect      : "fadeIn"
           });
       });
</script>
<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>

Kodları ekledikten sonra, işin en önemli yanı kodun içerisindeki .js dosyalarını felan yani size ait olmayan hosttaki dosyaları kendi hostunuza alın, gün gelir adam cart diye dosyaları siler sonra n’olcak ? O yüzden sağlama alın rahat edin. Sağlıcakla kalın 🙂

Güncelleme

Yorumlarınız sayesinde ‘bize ait olmayan host’taki dosyaların duman olduğunu fark ettim 🙂 Güncel dosyalara bu linkten ulaşabilirsiniz: Lazy Load | jQuery Plugin Registry

Resimler siteyi açtıkça görünsün LazyLoad

Furkan Özden

Blog dünyası ile 2009 yılında tanıştım. Bloğumda haftada en az bir yazı yayımlıyorum. Yazdığım yazıları beğendiyseniz beni Twitter'dan (@frknzdn) takip edebilirsiniz. Daha fazlası için hakkımda sayfasını ziyaret edin.

12 Cevaplar

  1. Can Atasever dedi ki:

    Bir soru: Bu kodu ekledikten sonra sayfa açıldığında resimler tamamen host’tan çekilip sayfada aşağıya indikçe mi gösteriliyor yoksa aşağıya indikçe mi resimler yükleniyor? İlk söylediğim şekildeyse, bandwith açısından herhangi bir yararı yok, sadece görselliğe yarıyor demektir.

  2. Furkan ÖZDEN dedi ki:

    Ya aslında orayı bende anlayamadım. İnterneti yavaş bir bilgisayarda denesek anlarız aslında.

  3. Ahmet İşcan dedi ki:

    bol resim olan siteler için çok iyi bir yöntem 🙂 şimdilik benim sitelerimde gerek yok ama arşive almakta fayda var 🙂

  4. Sinan YORULMAZ dedi ki:

    @Can Atasever;
    Benim bildiğim öncelikli olarak sitenin görünen kısmını yüklüyor ve arka planda diğer resimlerde yüklüyor ama göstermiyor. Böylelikle sitenin hızlı açılmasını sağlıyor ve diğer içeriği aşağı indikçe gösteriyor.

  5. Can Atasever dedi ki:

    @4

    O zaman dediğim gibi sadece görsel bir güzellik 🙂 ama gerçekten hoş bir jQuery çalışması 🙂

  6. Sosyal Medya dedi ki:

    Sayfa açılış hızı 95 olan siteme yukarıdaki kodları ekleyince 88 e geriledi. Sanırım hız açısından pek bir faydası yok.

  7. Can Atasever dedi ki:

    @6

    Doğal olanı bu, sonuçta ekstradan bir kod çalıştırıyorsunuz 🙂

  8. SerdaR dedi ki:

    sanırım o kodları ekleyince yine sayfanın tümü yükleniyor fakat görsellik olarak sonra açılıyormuş gibi bir efekt katıyor.

  9. hopdi dedi ki:

    banttan kazanmak için güzel bir yol ancak wordpress gibi widgetli sitelerde biraz sorun yaratabiliyor. bazen tüm site açıldığı halde, sağ ya da sol sütunlar geç gelebiliyor. bunun için sitenin en altına kadar inmek zorunda kalıyorsun. ama ne fayda, ziyaretçi beklemeden kaçıp gidiyor.

  10. isabet dedi ki:

    güzel eklenti teşekkürler

  11. Aydın dedi ki:

    Hocam .js dosyalarına ulaşamıyorum. Keşke kendi sitenize yükleseydiniz js dosyalarını.
    Ya da mailime ulaştirabilirseniz çok sevinriim.

Bir Cevap Yazın

Bunlar da hoşunuza gidebilir...

%d blogcu bunu beğendi: