LazyLoad

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="http://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>

 

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-01-21 tarihinde yayınlandı,Toplam 1635 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...