Cara Agar Gambar Tidak Terbuka Sebelum Scroll

Cara Agar Gambar Tidak Terbuka Sebelum Scroll di Blogger – Proses waktu pemuatan suatu halaman situs web dapat dipengeruhi beberapa hal salah satunya gambar, akan tetapi kita dapat mengakalinya dengan kode script untuk menunda semua gambar terbuka pada halaman web sebelum melakukan scroll dan cara ini sangat efektif untuk meningkatkan kecepatan loading website atau blog kita.

Cara Agar Gambar Tidak Terbuka Sebelum Scroll
Cara Agar Gambar Tidak Terbuka Sebelum Scroll

Penerapan Cara Agar Gambar Tidak Terbuka Sebelum Scroll ini juga biasanya digunakan para master programer devolloper desainer themes blog pada Cara Meningkatkan Loading Blog dengan LazySizes, dan sudah terbukti manjur untuk mengatasi blog yang lambat terbuka saat diakses.

Cara Agar Gambar Tidak Terbuka Sebelum Scroll di Blogger

Selanjutnya kita akan masuk ke pembahasan panduannya, seperti biasa cara kali ini kita akan melakukan sedikit penambahan kode script pada thema Blogger. Sip langsung saja kita masuk ke tutorialnya.

1. Seperti biasa, pertama kita login ke blogger dengan akun gmail kalian.

2. Kemudian kita masuk ke Menu Tema > Edit HTML Lalu cari kode </body> kemudian tambahkan kode dibawah ini tepat diatasnya.

<script>
//<![CDATA[
// LazyLoad
function loadScript(d){var o=document.createElement("script");o.src=d,document.body.appendChild(o)}function downloadJSAtOnload(){loadScript("https://cdn.jsdelivr.net/gh/Arlina-Design/phantom@master/lazyarlinas.js")}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

Bagi kalian yang sudah memasang kode LazySizes, bisa ganti kode diatas dengan kode dibawah ini.

<script>
//<![CDATA[
// Lazysizes
var lazysizer=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazysizer||0!=document.body.scrollTop&&!1===lazysizer)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdn.jsdelivr.net/gh/Arlina-Design/phantom@master/lazysarline.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazysizer=!0)},!0);
//]]>
</script>

3. Untuk cara penerapannya hampir sama dengan cara LazySizes, caranya cari semua kode img pada tema yang kamu gunakan. Kemudaian tambahan kode class=’lazy’ didepannya jika memasang Kode 1 diatas, jika Kode 2 tambahkan kode class=’lazyload’.

Ganti kode src menjadi data-src dan tambahkan kode src=’data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=’ setelah data-src.

Contohnya, misal saya memasang kode 1 diatas :

<img src='//www.blogger.com/img/icon_delete13.gif'/>
Maka kita rubah menjadi seperti ini
<img class='lazy' data-src='//www.blogger.com/img/icon_delete13.gif' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>

4. Jika semua kode img pada tema sudah kalian rubah, kemudian klik Save / Simpan.

Saya rasa cukup sampai disini artikel Cara Agar Gambar Tidak Terbuka Sebelum Scroll yang dapat saya sampaikan semoga bermanfaat, selamat mencoba. Untuk kalian yang masih belum mengerti atau mau request silakan Takon sesuatu di komentar Disqus dibawah ini.

You May Also Like

Cara Menggunakan Trackview untuk Sadap di Android

Cara Menggunakan Trackview untuk Sadap di Android

Cara Mengganti Warna Gambar Bitmap / Mati di CorelDraw

Cara Mengatasi Hasil Combine Dua Objek Yang Tidak Bolong Di CorelDRAW

Cara Mengatasi Hasil Combine Dua Objek Yang Tidak Bolong Di CorelDRAW

Kode Kelurahan Untuk Sirekap Lengkap Unduh XLSX

Kode Kelurahan Untuk Sirekap Lengkap Unduh XLSX

2 thoughts on “Cara Agar Gambar Tidak Terbuka Sebelum Scroll”

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.