LazyLoad

Mika Tuupolanın   geliştirdiği çok  uzun sayfalarda paylaşılmış olan resimlerin aynı anda  açılmasını engelleyen ve  ziyaretçi  sayfayı aşağı  doğru  indirdikçe  resimlerin yüklenmesini  sağlayan bir  uygulamadır.  Sayfada fazla  resim  olduğunda boyut  kat  kat  yükselir buda sayfanın geç yüklenmesine  neden olur. Özellikle sitesi ağır olan ve genellikle  resim paylaşımında bulunan  arkadaşlar  için  kesinlikle kullanmasını önerdiğim  bir eklenti.

Kullanım

• Head etiketleri arasına eklemeniz gereken bölümler.

Dosya adresleri :

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="jquery.lazyload.js?v=3" type="text/javascript" charset="utf-8"></script>

JavaScript :

  <script type="text/javascript" charset="utf-8">
      $(function() {
          $("img").lazyload({
              effect : "fadeIn",
              /*
              appear : function(elements_left, settings) {
                  console.log("appear");
                  console.log(elements_left);
                  //console.log(this, elements_left, settings);
              },
              load : function(elements_left, settings) {
                  console.log("load");
                  console.log(elements_left);
                  //console.log(this, elements_left, settings);
              }
              */
          });
      });
  </script>

• Body etiketleri arasına eklemeniz gereken bölüm.

Html :

  <div id="wrap"> 
    <div id="content">
    <img src="img/grey.gif" data-original="1.jpg" width="765" height="574" alt="Baslik">
    <img src="img/grey.gif" data-original="2.png" width="765" height="574" alt="Leopar">
    <img src="img/grey.gif" data-original="3.jpg" width="765" height="574" alt="Kaplan">
    <img src="img/grey.gif" data-original="4.jpg" width="765" height="574" alt="Bocuk">
    <img src="img/grey.gif" data-original="5.png" width="765" height="574" alt="tavsan"
    <img src="img/grey.gif" data-original="6.png" width="765" height="574" alt="Leopar">
	</div>
  </div>