Cara Memasang Lazy Loading Disqus on Scroll

Ada sebuah platform yang menyediakan sistem layanan komentar yang bisa kalian gunakan di website atau blog kalian, platform apakah itu?. Ya tidak lain dan tidak bukan platform itu bernama Disqus, sekarang ini Disqus sudah menjadi pilihan terbaik untuk para pengguna komentar dan para pengguna website. Loh kok bisa? karena Disqus memiliki beberapa fitur yang lebih bila dibandingkan dengan sistem komentar yang biasa kalian gunakan di website kalian apapun default yang ada di Blogger maupun efault yang ada di Wordpress.

Disqus dengan fitur fiturnya yang sangat membantu, akan tetapi ada juga kekurangannya karena Disqus adalah plugin dari pihak ke tiga oleh karena itu Disqus menyumbang beban loading ke website kalian setiap kali kalian membuka sebuah artikel. Untuk mengatasi hal itu, oleh karena itu aku kali ini akan berbagi sebuah tips tentang Cara Memasang Lazy Loading Disqus on Scroll. Untuk apa kita pasang lazy load pada diskus? dan apa manfaatnya? jika kalian memasangnya Disqus tidak akan memuat dirinya dalam website kalian sebelum kalian scroll halaman hingga bagian (viewport) Disqus terlihat, manfaatnya ini akan mempercepat loading website kalian.

Bagi kalian yang ingin menerapkan cara ini, langsung saja kalian ikuti tutorial di bawah ini.

Cara Memasang Lazy Loading Disqus on Scroll

Buka Blogger > Klik menu Tema > Klik Edit HTML > Kemudian kalian cari code ini

<b:includable id='comments' var='post'>

Kemudian kalian tambahkan code di bawah ini tepat di bawah code <b:includable id='comments' var='post'>

<b:if cond='data:view.isPost'>
<div id='disqus_thread'>
<div id='disqus_empty'/></div>
<script>
//<![CDATA[
function load_disqus(e){var t=document.getElementById("disqus_empty"),d=document.getElementById("disqus_thread"),n=document.createElement("script"),s=document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0];d&&t&&(n.type="text/javascript",n.async=!0,n.src="//"+e+".disqus.com/embed.js",s.appendChild(n),t.remove())}window.addEventListener("scroll",function(e){var t=document.scrollingElement.scrollTop,d=document.getElementById("disqus_thread");d&&t>d.getBoundingClientRect().top-150&&(load_disqus("YOUR-DISQUS-USERNAME"),console.log("Disqus loaded."))},!1);
//]]>
</script>
</b:if>

Contoh penerapannya seperti ini

<b:includable id='comments' var='post'>
<b:if cond='data:view.isPost'>
<div id='disqus_thread'>
<div id='disqus_empty'/></div>
<script>
//<![CDATA[
function load_disqus(e){var t=document.getElementById("disqus_empty"),d=document.getElementById("disqus_thread"),n=document.createElement("script"),s=document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0];d&&t&&(n.type="text/javascript",n.async=!0,n.src="//"+e+".disqus.com/embed.js",s.appendChild(n),t.remove())}window.addEventListener("scroll",function(e){var t=document.scrollingElement.scrollTop,d=document.getElementById("disqus_thread");d&&t>d.getBoundingClientRect().top-150&&(load_disqus("YOUR-DISQUS-USERNAME"),console.log("Disqus loaded."))},!1);
//]]>
</script>
</b:if>
...
...
</b:includable>

Jangan lupa kalian ganti code yang aku tandai dengan Username Disqus website kalian.

Untuk kode CSS nya tambahkan code di bawah ini sebelum code </head>

<b:if cond='data:view.isPost'>
<style>
#disqus_thread{display:block;position:relative;overflow:hidden;padding:20px 0 0 0;margin:20px auto 0 auto;border-top:1px solid rgba(0,0,0,0.08)}#comments{display:none}
</style>
</b:if>

Lalu kalian klik Simpan tema dan selesai!

• Result

Semoga Cara Memasang Lazy Loading Disqus on Scroll yang aku bagikan kali ini bisa bermanfaat bagi kalian. Dan terima kasih sudah berkunjung.