Mecha versi 2.6.4 sudah dirilis!

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:

Lazyload pada Google
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.

28 Komentar

Unknown

manteb mas :D sip2 blogny keren thanks buat infony
visitback y

Unknown

kok gk fungsi sob?

Unknown

uda fungsi sob, thank ye ---

IZAL

cihuyy.. informasi baru.. thanks om hompimpa.. :p

Unknown

Kok nggak berhasil ya? mohon pencerahannya Mas

Taufik Nurrohman

@Mivt elRahman Kok di blog Saya bisa ya? Hehe... :p
Yang selama ini Saya lihat sih memang masalahnya ada di gambar. Berat sekali pemuatannya:

Selain itu juga untuk latar ini: http://themes.googleusercontent.com/image?id=1JnaUR617vN187sHsY6g8xNVF6pVifULShzBF9uPMSFikevM4uUZDbk_YpKb1eq7yvnoA besar sekali. Sampai 100KB :'( Jadi membuka halaman rasanya seperti mendownload lagu. Dilihat dari bentuk URLnya saja juga bukan merupakan URL searah (maksudnya URL yang memiliki akhiran nama file seperti .jpg, .png dan .gif). Lebih baik diganti saja sama pattern yang kecil kemudian diduplikasi.

Saya tidak begitu tahu cara kerjanya, tapi Saya rasa untuk tipe URL yang mengarahkan ke gambar tapi URLnya tidak berakhir dengan ekstensi gambar biasanya membutuhkan komunikasi yang rumit terlebih dahulu sama hostnya (dalam hal ini: http://themes.googleusercontent.com)

Atau mungkin ini juga karena JavaScript. Kalau JavaScript terasa lambat, coba pindah letaknya dari yang tadinya di atas </head> menjadi ke bagian paling bawah (di atas </body>). Setidaknya, diharapkan peramban akan berhasil membaca yang cepat terlebih dahulu. Sedangkan untuk bagian-bagian yang cukup berat akan diakses belakangan.

Unknown

Iya mas, itulah makanya. Aku juga kesel. Tapi untung ada artikel ini: http://hompimpaalaihumgambreng.blogspot.com/2012/04/optimasi-thumbnail-pada-auto-read-more.html
Jadi membantu sekali.

Anonim

Mas maksudnya threshold apaan ya....? :p ~x(

Putra

harus jquery/1.4.3/ ? yayayah? :/

Putra

@Taufik Nurrohman efek di blog saya maslahnya gak terasa 100% soalnya, masih ragu brhasil kagaknya :D

Unknown

Mas Taufik, ko aku malah gambar di blog aku malah jadi kaya yng ditunjukan gambar ini... Padahal loading sudah selesai mas ???
apanya ya mas ???

apakah gambarnya terlalu berat ya mas taufik... :(

Surga Kenari

nah ini kasus sama seperti saya, mirip.

tepat di element posting, gambar ga muncul padahal sdh di gulung..

jadikanpinter.blogspot.com/2012/07/suatu-saat-insya-allah.html

tapi buat sidebar dll. setelah di gulung sih aman(nongol)

@_@ jadi bingung buat masalah yg satu ini..

ada solusinya kah mas Taufik?

Taufik Nurrohman

@trii waluyo Mungkin akses internetnya. Gambar asli baru bisa tampil kalau layar digulung. Coba gulung-gulung sampai tampil. Kalau tetap tidak tampil berarti ada yang salah. Tapi kalau JQuery sudah bisa mengganti gambar asli menjadi gambar dari nilai placeholder harusnya sih jadi.

Surga Kenari

pak gue udah pasang, tp gue masih ga ngerti sama cara kerjanya??

wkwkwkw... blom faham betul nih

Surga Kenari

pak yg value 500 itu maksudnya apa?

threshold : 500

Taufik Nurrohman

@Isnan Nugrah Lastiko Itu batas minimum pemicu pemuatan gambar. Kalau nggak salah, gambar placeholder akan berubah menjadi gambar asli saat jarak tengah layar berada 500 piksel di atas gambar target. Kalau nggak salah begitu. Cek dokumentasinya: http://www.appelsiini.net/projects/lazyload

Surga Kenari

ohh makasih pak penjelasannya

gue sempet rubah jadi 1,

tapi mending gue rubah lagi ajah ya value nya menjadi 500

hehe

tes

mas apa beda jquery 1.7.2 dengan versi lain ?

Taufik Nurrohman

Itu cuma sejarah versi pembaharuan saja. Semakin baru semakin bagus.

tes

heheheh makasih mas :D saya setiap hari mantau ke sini :D mencari hal2 baru

IM

berhasil di semua blog saya :D \o/

Unknown

om mau tanya, ada pengaruh nya gak sih ke SEO?
soal nya, untuk alt nya kan kita ganti jadi loading?
bertentangan sama ilmu seo...
:p

neylan

http://reader-download.googlecode.com
tidak bisa diakses
bagaimana solusinya

Anonim

di blog saya terbalik mas, untuk gambar profil yang tadinya sudah termuat ko berbubah menjadi abu tetapi untuk di komentar saja untuk yang lainnya normal-normal saja. boleh dikasih pencerahannya mas?

Taufik Nurrohman

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

you

terima kasih mas atas tanggapannya.. v sudah kembali normal.. ternyata ada salah sedikit... mhon jawab cara menampilkan input pada emoticon ya mas.. terima kasih sebelumnya

Anonim

ini berfungsi untuk semua gambar di halaman blog kita ya pak?? otomatis akan terload abu2 sampai proses halaman bener2 selesai?

Komentar telah ditutup.