Preload Gambar dengan jQuery (Update)

Beberapa saat yang lalu Blogger Tune-Up membuat artikel tentang Preload Gambar dengan jQuery yang di sadur dari web aslinya, tetapi sekarang Blogger Tune-Up membuat sendiri script Preload Image with jQuery dengan tetap menggunakan plugin Lazyload Mika Tuupola. Hal ini karena beberapa teman blogger merasa sangat rumit sampai pusing-pusing dengan teknik tersebut, maka sekarang semua dibuat serba otomatis tanpa harus mengubah atau menghapus kode gambar yang kita upload. Kita hanya perlu menyisipkan kode pemanggilnya saja. Pasti penasaran? (Let's go for less write do more...)

Demo Preload Image with jQueryKlik disini untuk melihat demo Preload Gambar dengan jQuery

Memasang Plugin Lazyload dan Plugin Preload Image pada Template Blogger

Untuk Langkah 1 sampai dengan Langkah 5 silahkan ikuti petunjuk pada artikel sebelumnya disini.

Langkah 6
Masukan (copy paste) kode 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://hensblog.googlecode.com/files/jquery.lazyload.mini.js' type='text/javascript'/>
<script src='http://hensblog.googlecode.com/files/preloadimg_pack.js' type='text/javascript'/>

Langkah 7
Simpan template dan lanjutkan tutorial...

Modifikasi Kode Gambar pada Artikel Blogger

Langkah A
Buatlah artikel dan upload sebuah gambar
Langkah B
Pindahkah mode editor "Tulis" ke mode "Edit HTML"
Langkah C
Carilah kode gambar dari gambar yang baru saja kita upload, misal seperti dibawah ini:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvzbhyHlxyTc3j9gwEVQyyUP9s0cNC960I_4XuS2iOtnydkBnEm-sn-l6ljSFr6droWun6M_h_c4UCWZWeebUqcOiU47mzimmEXHaLD9_5xLSIIIA8da4Tj6JjHuNLd1KzmUitWBmtDmut/s400/preload-image-jquery.png">
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 222px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvzbhyHlxyTc3j9gwEVQyyUP9s0cNC960I_4XuS2iOtnydkBnEm-sn-l6ljSFr6droWun6M_h_c4UCWZWeebUqcOiU47mzimmEXHaLD9_5xLSIIIA8da4Tj6JjHuNLd1KzmUitWBmtDmut/s400/preload-image-jquery.png" border="0" alt="jQuery Auto Image Caption"id="BLOGGER_PHOTO_ID_5484533350455173970" />
</a>

Langkah D
Sisipkan kode dibawah ini pada (contoh) kode gambar diatas:

class="loadgambar"

Sehingga kode menjadi seperti dibawah ini (kode sisipan yang di blok):

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvzbhyHlxyTc3j9gwEVQyyUP9s0cNC960I_4XuS2iOtnydkBnEm-sn-l6ljSFr6droWun6M_h_c4UCWZWeebUqcOiU47mzimmEXHaLD9_5xLSIIIA8da4Tj6JjHuNLd1KzmUitWBmtDmut/s400/preload-image-jquery.png">
<img class="loadgambar" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 222px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvzbhyHlxyTc3j9gwEVQyyUP9s0cNC960I_4XuS2iOtnydkBnEm-sn-l6ljSFr6droWun6M_h_c4UCWZWeebUqcOiU47mzimmEXHaLD9_5xLSIIIA8da4Tj6JjHuNLd1KzmUitWBmtDmut/s400/preload-image-jquery.png" border="0" alt="jQuery Auto Image Caption"id="BLOGGER_PHOTO_ID_5484533350455173970" />
</a>

Langkah E
Terbitkan dan preview artikel tersebut...

Download Preload Image with jQueryKlik disini untuk mengambil source code Preload Gambar dengan jQuery

Keterangan: