Preload Gambar dengan jQuery

Bismillah. Apakah blog anda termasuk boros gambar? Jika ya mungkin tips-n-trik kali ini bisa menjadi solusi untuk mempercepat load artikel yang dipenuhi gambar. Biasanya blog-blog tutorial desain grafis berisi screenshoot gambar suatu software yang banyak untuk memperjelas artikel. Banyaknya gambar pada suatu artikel akan membuat load halaman yang dimaksud menjadi berat. Preload gambar dengan jQuery digunakan untuk mempercepat load gambar-gambar tersebut dengan cara diwakili oleh suatu icon. Pada saat awal pembukaan halaman artikel maka gambar-gambar tersebut belum diload dari server dan ketika kita klik atau mouse melewati icon yang mewakilinya maka gambar akan diload dari server. Plugin yang akan digunakan untuk membuat preload gambar kali ini menggunakan Lazyload buatan Mika Tuupola.

Demo Preload Image with jQuery

Memasang Plugin Lazyload pada Template Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan kode CSS dibawah ini diatas kode pada langkah 3:

#viewimg {
background-color:#EEE;
border: 1px solid #999;
padding: 5px;
margin: 5px 0;
text-align:center;
}

Langkah 5
Cari kode dibawah ini:

</head>

Langkah 6
Masukan kode JavaScript dibawah ini diatas kode pada langkah 5:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://www.appelsiini.net/download/jquery.lazyload.mini.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#viewimg img").lazyload({
placeholder : "http://lh5.ggpht.com/_xcD4JK_dIjU/TAql2pBIGqI/AAAAAAAAEJ8/_pK2fhsr5m0/d/viewimg.png",
event : "mouseover",
effect : "fadeIn",
container: $("#viewimg")
});
});
//]]>
</script>

Langkah 7
Simpan template anda dan lanjutkan ke tutorial berikutnya...

Modifikasi Kode Gambar pada Artikel Blogger

Langkah A
Silahkan buat suatu artikel dan masukan (upload) suatu gambar pada artikel anda
Langkah B
Pastikan editor artikel berada pada mode Edit HTML
Langkah C
Akan terlihat link gambar yang sudah kita upload seperti contoh dibawah ini:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA48SD_VVXq0-Hh0I-6c9YVk2rkPeDwqLQBERldaXHj3GgOj-dI9sCC6z0237az_Ik2JlAFzKkWghh-vj52__xjXKxQqSo3A2kB4-9SL04lRFvRvmYDUNUs0PAtvDd6zSHLmGboPxLIrs/s1600/gambar.png">
<img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 184px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA48SD_VVXq0-Hh0I-6c9YVk2rkPeDwqLQBERldaXHj3GgOj-dI9sCC6z0237az_Ik2JlAFzKkWghh-vj52__xjXKxQqSo3A2kB4-9SL04lRFvRvmYDUNUs0PAtvDd6zSHLmGboPxLIrs/s400/gambar.png" alt="" id="BLOGGER_PHOTO_ID_5477295327775305842" border="0" />
</a>

Perhatikan link yang diblok diatas itu adalah link sumber dari gambar tersebut, terserah kita akan menggunakan sumber gambar yang mana.
Link dibawah ini adalah link sumber gambar dengan ukuran sama dengan aslinya:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA48SD_VVXq0-Hh0I-6c9YVk2rkPeDwqLQBERldaXHj3GgOj-dI9sCC6z0237az_Ik2JlAFzKkWghh-vj52__xjXKxQqSo3A2kB4-9SL04lRFvRvmYDUNUs0PAtvDd6zSHLmGboPxLIrs/s1600/gambar.png

Link dibawah ini adalah link sumber gambar dengan ukuran yang sudah diperkecil:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA48SD_VVXq0-Hh0I-6c9YVk2rkPeDwqLQBERldaXHj3GgOj-dI9sCC6z0237az_Ik2JlAFzKkWghh-vj52__xjXKxQqSo3A2kB4-9SL04lRFvRvmYDUNUs0PAtvDd6zSHLmGboPxLIrs/s400/gambar.png

Jika diperhatikan maka kedua link sumber gambar tersebut sama saja hanya berbeda pada s1600 dan s400.
Langkah D
Link sumber gambar sudah kita peroleh, masukan kode preload gambar seperti dibawah ini:

<div id="viewimg"><img src="#" original="link sumber gambar"/></div>

Masukan link sumber gambar yang sudah kita peroleh (lihat langkah C) sehingga kode preload gambar menjadi seperti dibawah ini:

<div id="viewimg"><img src="#" original="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA48SD_VVXq0-Hh0I-6c9YVk2rkPeDwqLQBERldaXHj3GgOj-dI9sCC6z0237az_Ik2JlAFzKkWghh-vj52__xjXKxQqSo3A2kB4-9SL04lRFvRvmYDUNUs0PAtvDd6zSHLmGboPxLIrs/s1600/gambar.png"/></div>

Langkah E
Terbitkan artikel dan preview artikel tersebut, kemudian arahkan mouse pada icon gambar yang mewakilinya...

Download Preload Image with jQuery

Keterangan :
Perhatikan langkah 4!

• Jika ternyata gambar terlalu besar dan tidak ditampilkan sempurna pada halaman artikel kita bisa menambahkan/menyisipkan kode srollbar "overflow:auto;" (tanpa tanda kutip) pada kode CSS tersebut.
• Ubah warna background #EEE sesuai dengan keinginan anda
• Ubah warna garis tepi #999 sesuai dengan keinginan anda (jika bingung gunakan HTML Color Code)

Perhatikan langkah 6!
Ubahlah link icon yang mewakili gambar sesuai dengan yang anda inginkan pada kode dibawah ini:

placeholder : "http://lh5.ggpht.com/_xcD4JK_dIjU/TAql2pBIGqI/AAAAAAAAEJ8/_pK2fhsr5m0/d/viewimg.png"

Gambar akan terbuka jika kita geser mouse melalui icon yang mewakilinya, jika ingin dengan metode klik untuk membuka gambar ubah kode dibawah ini:

event : "mouseover"

menjadi seperti dibawah ini:

event : "click"

Preload Gambar dengan jQuery Versi Update

Alhamdulillah. Selamat mencoba dan semoga berhasil... Happy Blogging :)