Percepat Loading Blog dengan Plugin Lazyload

Pos ini sudah kadaluarsa. Peramban moderen sudah tidak bisa lagi membatalkan proses muat gambar meskipun plugin ini sudah melepaskan atribut src pada gambar. Satu-satunya cara yang bisa dilakukan untuk menggunakan plugin ini dengan benar adalah dengan meletakkan URL gambar asli pada atribut data-original. Itu artinya Anda harus mengubah semua URL gambar pada semua posting, dan itu tidak mungkin bisa dilakukan. Plugin ini tidak bisa hanya ditempel begitu saja:

Remove all code regarding placeholder and automatically removing src attribute. It does not work with modern browsers. Must use data-original attribute instead. — Changelog #1.6.0

Alternatif yang lebih sederhana untuk mengetahui cara kerja plugin ini bisa dibaca pada halaman ini ⇒ Lakukan Sesuatu Jika Elemen Mencapai Area Terlihat

Jika kalian mengunjungi Google untuk mencari gambar, mungkin kalian akan menemui situasi semacam ini saat hasil penelusuran gambar ditampilkan:

Halaman penelusuran gambar Google.

Itu adalah salah satu cara Google untuk mempercepat muat halamannya walau dengan hasil temuan gambar yang begitu banyak. Setiap gambar yang masih berada di bawah layar (sebut saja begitu) tidak akan diakses, melainkan hanya akan digantikan dengan sebuah gambar kelabu. Sampai sesaat kemudian layar digulung ke atas dan gambar-gambar kelabu di bawahnya muncul, gambar-gambar kelabu itupun akan menghilang lalu mengubah dirinya menjadi gambar yang asli. Dan, ya, itu adalah sistem Google yang sempat membuat Saya sangat terkesan. Dengan cara ini, maka kita tidak perlu lagi mengeklik tautan Halaman Sebelumnya atau Halaman Berikutnya, kita cukup menggulung layarnya saja ke atas dan gambar-gambar di halaman sebelumnyapun masih tetap ada pada tempatnya. Tidak perlu membolak-balik halaman, dan tentu saja itu akan lebih menghemat waktu dan biaya.

Anda juga bisa menerapkan sistem ini ke dalam blog. Diutamakan untuk blog-blog yang memiliki begitu banyak gambar dalam satu halaman. Percaya tidak percaya, sistem ini hanya melibatkan JQuery

Masuk ke tab Rancangan, kemudian pilih Edit HTML.

Pertama-tama, pastikan dulu bahwa blog Anda sudah dilengkapi dengan JQuery:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

Jika belum ada, salinlah skrip tersebut, kemudian letakkan di atas kode </head>

Setelah itu salin juga kode ini, lalu letakkan tepat di bawah skrip tadi:

<script src='http://reader-download.googlecode.com/svn/trunk/lazyload.js' type='text/javascript'></script>
⇒ https://github.com/tuupola/jquery_lazyload/commit/3f123e96020e9678af15bbf57bf0787339c8eaa5
<script type='text/javascript'>
$(function() {
  $('img').lazyload({
    placeholder : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
    effect      : "fadeIn",
    threshold   : 500
  });
});
</script>

Klik Simpan Template dan selesai sudah.

Anda lihat URL gambar yang Saya beri tanda itu? Itu adalah gambar kelabu yang Saya maksud. Coba saja akses URL tersebut, Saya jamin Anda tidak akan mememukan apapun kecuali hanya sebuah titik kelabu. Ya, itu adalah gambarnya. Ukurannya hanya 1 × 1 piksel, jadi tidak akan memberatkan.