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:
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? :/
Taufik Nurrohman
@Alam Perwira Nggak juga kok. Saya pakai versi
1.7.2
juga masih jalan » Lihat Demo!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 atributdata-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: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?