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 jQuery

Memasang Plugin Lazyload dan Preload Image

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://www.appelsiini.net/download/jquery.lazyload.mini.js' type='text/javascript'/>
<script src='URL/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/AVvXsEh-tCl5_NtV-JqLwRcbktGqHHuxuqcMRh0BJzNh4d0PEAKh0YLLh3tHNHrcj0mIBY5yISbahgnhF5YL0ihwCFR3wssjAIknB11bn3WTKGnAJBVPmuAhcL_Ka6Aw8M16nO98NUAYMr90pm3Y/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/AVvXsEh-tCl5_NtV-JqLwRcbktGqHHuxuqcMRh0BJzNh4d0PEAKh0YLLh3tHNHrcj0mIBY5yISbahgnhF5YL0ihwCFR3wssjAIknB11bn3WTKGnAJBVPmuAhcL_Ka6Aw8M16nO98NUAYMr90pm3Y/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/AVvXsEh-tCl5_NtV-JqLwRcbktGqHHuxuqcMRh0BJzNh4d0PEAKh0YLLh3tHNHrcj0mIBY5yISbahgnhF5YL0ihwCFR3wssjAIknB11bn3WTKGnAJBVPmuAhcL_Ka6Aw8M16nO98NUAYMr90pm3Y/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/AVvXsEh-tCl5_NtV-JqLwRcbktGqHHuxuqcMRh0BJzNh4d0PEAKh0YLLh3tHNHrcj0mIBY5yISbahgnhF5YL0ihwCFR3wssjAIknB11bn3WTKGnAJBVPmuAhcL_Ka6Aw8M16nO98NUAYMr90pm3Y/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 jQuery

Keterangan:

• Tapi tetap lebih efektif teknik sebelumnya, makanya bagi anda yang terbiasa dengan kode silahkan gunakan teknik sebelumnya.

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