Ditulis oleh: Ditulis pada: 12/14/2014
Seperti kita ketahui bahwa image merupakan salah satu faktor yang menyebabkan beban pada loading blog. Untuk itu kita harus benar-benar mengoptimasi gambar agar tidak terlalu membebani blog.
Dan trik yang paling umum dan banyak digunakan untuk mengatasi loading image ini salah satunya yaitu jquery lazy loading. Nah kali ini saya akan share sebuah trik untuk mengatasi loading image ini tanpa menggunakan plugin lazy loading, namun menggunakan sebuah javascript sederhana. Prinsipnya sama dengan plugin lazy loading, namun tanpa menyertakan perhitungan posisi scroll.
Javascript ini hanya untuk defer image atau menunda pemuatan gambar dan menampilkannya setelah semua element web termuat. Trik ini saya temukan di web Feedthebot milik +Patrick Sexton. Untuk selengkapnya mengenai hal ini silahkan baca postingannya di url di bawah ini.
Source: http://www.feedthebot.com/pagespeed/defer-images.html
Namun pada postingan Feedthebot tersebut tidak menjelaskan cara mengatasi atau cara menggunakan trik tersebut untuk gambar-gambar yang sudah dipublish. Jika postingan blognya baru beberapa postingan sih mungkin tidak menjadi masalah karena kita bisa mengedit postingannya satu per satu. Namun bagaimana jika postingannya sudah ratusan?
Nah kali ini saya akan melengkapi trik dari Feedthebot untuk deferring image tersebut untuk image yang sudah dipublish secara otomatis tanpa harus mengeditnya satu per satu.
Untuk hal tersebut tentunya kita memerlukan bantuan jquery, akhirnya!. Namun jangan khawatir, jquery ini kecil sekali.
Sebagaimana dijelaskan di Feedthebot, trik ini sebenarnya memanipulasi peramban dengan menggunakan image tipuan berupa sebuah titik transparan kecil 1px x 1px dengan size hanya 26 bytes untuk ditampilkan sebelum semua element blog termuat. Dan jika semua element sudah berhasil dimuat maka image sesungguhnya akan ditampilkan.
Biasanya sebuah html image akan seperti berikut:
<img src="your-image-here">
Dan untuk menggunakan trik defer image ini kita akan membuat tipuan html image dan kita menggunakan html image seperti berikut:
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="your-image-here">
Perhatikan kode berikut dari kode di atas:
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
Itu adalah image tipuan untuk ditampilan peramban sebelum semua element blog termuat. Dan javascript untuk menampilkan image sesungguhnya setelah semua element termuat seperti berikut ini, silahkan simpan di atas kode
</body>
<script>
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>
Lantas bagaimana jika kita ingin mengimplementasikan trik ini pada image yang sudah ada di blog?
Untuk mengimplementasikan trik di atas untuk semua image yang ada di blog, kita tidak perlu mengedit image satu per satu. Kita akan menambahkan image tipuan pada image yang sudah ada dan mengganti
src pada image asli menjadi data-src agar javascript defer image-nya bisa berfungsi. Kita akan menggunakan sebuah jquery yang kecil sekali untuk melakukan hal tersebut.
Silahkan gunakan script di bawah ini yang sudah saya gabungkan antara jquery untuk menambahkan image tipuan pada image yang sudah ada dan mengganti
src pada image asli menjadi data-src dengan javascript defer image.
<script type='text/javascript'>
//<![CDATA[
$("img").each(function(){$(this).attr("data-src",$(this).attr("src"));$(this).attr("src","data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=")});
function init(){var e=document.getElementsByTagName("img");for(var t=0;t<e.length;t++){if(e[t].getAttribute("data-src")){e[t].setAttribute("src",e[t].getAttribute("data-src"))}}}window.onload=init;
//]]>
</script>
Anda hanya perlu menggunakan script di atas (kodenya sudah saya minify) dan simpan di atas kode
</body> dan Anda tidak perlu melakukan apa-apa lagi dan lakukan hal seperti biasa ketika mengupload atau menampilkan image baru di blog.
Script di atas akan otomatis menambahkan image tipuan pada semua image yang sudah ada dan mengganti
src pada image asli menjadi data-src dan menampilkan kembali image aslinya setelah semua element blog termuat.
Dan seperti yang dijelaskan di Feedthebot, dengan menggunakan trik ini maka iklan Adsense dapat tampil lebih cepat sehingga lebih menguntungkan untuk publisher Adsense karena pengunjung blog dapat melihat iklannya lebih cepat terutama untuk iklan yang dipasang di header, di atas postingan, atau di sidebar paling atas.