Mintik posted
4 year ago

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.

  • Demo

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>

 

Mintik is curious about your thoughts. Add a comment
Did you know that members who log in don't see ads?
Sign in with E-mail