Tips : Lazy Loading Images


Images are one of the important factor that affects blog load time.So, reduce your blog Images load time now.

Lazy Load adalah plugin jQuery yang hanya akan mengakses gambar yang terlihat dari halaman web saja, sehingga dapat meningkatkan waktu loading halaman blog anda. Gambar yang berada di luar daerah dari tampilan beranda akan dimuat apabila user menggulung (Scroll) layar ke bawah, widget ini benar-benar akan mengurangi 50% waktu loading halaman anda.

Taruh kode ini diatas </body> :

JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="http://stylifyyourblog1.googlecode.com/svn/trunk/lazyload.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" charset="utf-8">
      $(function() {
          $("img").lazyload({placeholder : "http://2.bp.blogspot.com/-7mu1o035Ssk/TqmCSGtOLaI/AAAAAAAABWs/RAXNJm5NDPk/s1600/greys.gif"});
      });
  </script>
Script ini hanya akan bekerja pada area postingan pada blog anda, jika anda ingin menempatkan efek lazy load ini pada bagian sidebar anda maka cobalah script yang satu ini.

Kode untuk menempatkan efek lazy load ini pada bagian sidebar :

JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="http://stylifyyourblog1.googlecode.com/svn/trunk/lazyload.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" charset="utf-8">
      $(function() {
          $(".post-outer img").lazyload({placeholder : "http://2.bp.blogspot.com/-7mu1o035Ssk/TqmCSGtOLaI/AAAAAAAABWs/RAXNJm5NDPk/s1600/greys.gif"});
      });
  </script>

Note :

  • Jika code jquery 1.6.2 diatas sudah ada di blog anda maka tidak usah disertakan lagi.
  • Anda bisa mengganti gambar pengganti yang sudah saya tandai diatas

http://www.stylifyyourblog.com/2011/10/integrating-lazy-load-into-blogger.html
6 Comments
Related Post

Join the Discussion!

Anonymous
June 03, 2013 1:44 AM | Delete comment

GOod

Dont give a spam please!
Untuk menyisipkan video, gunakan
Untuk menyisipkan gambar, gunakan
Untuk menyisipkan kode, gunakan
Untuk menyisipkan beberapa baris kode, gunakan
Untuk menyisipkan catatan, gunakan
Untuk menciptakan efek teks tebal gunakan