Pos ini sudah kadaluarsa. Peramban moderen sudah tidak dapat lagi membatalkan proses muat gambar meskipun plugin ini sudah melepaskan atribut src pada gambar. Satu-satunya cara yang dapat dilakukan untuk memakai plugin ini dengan benar ialah dengan meletakkan URL gambar orisinil pada atribut data-original. Itu artinya Anda harus mengubah semua URL gambar pada semua posting, dan itu mustahil dapat dilakukan. Plugin ini tidak dapat 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. — Lakukan Sesuatu Jika Elemen Mencapai Area Terlihat
Jika kalian mengunjungi Google untuk mencari gambar, mungkin kalian akan menemui situasi semacam ini ketika hasil penelusuran gambar ditampilkan:
Itu ialah 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 kemudian mengubah dirinya menjadi gambar yang asli. Dan, ya, itu ialah sistem Google yang sempat menciptakan 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 dapat menerapkan sistem ini ke dalam blog. Diutamakan untuk blog-blog yang mempunyai 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 instruksi </head>
Setelah itu salin juga instruksi ini, kemudian letakkan sempurna 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 final sudah.
Anda lihat URL gambar yang Saya beri tanda itu? Itu ialah gambar kelabu yang Saya maksud. Coba saja kanal URL tersebut, Saya jamin Anda tidak akan mememukan apapun kecuali hanya sebuah titik kelabu. Ya, itu ialah gambarnya. Ukurannya hanya 1 × 1 piksel, jadi tidak akan memberatkan.
Sumber https://www.dte.web.id/