Javascript Load On Scroll Disqus Comment

Pagi ini saya akan bagikan buah tangan dari jalan-jalan bersama mbah Google hehehe... Kemarin saya nemuin sebuah web yang menarik perhatian saya yaitu komentar disqus di-load dikala halaman web di-scroll ke bawah.

Hal ini cukup anggun untuk menghemat loading blog alasannya yaitu dikala halaman dibuka, JS Disqus tidak ikut di-load. JS Disqus gres diload dikala halaman di-scroll ke bawah.

Nah ternyata hal ini dapat dilakukan dengan javascript yang cukup sederhana sehingga tidak akan menambah berat loading blog.

Untuk live demonya Anda dapat coba dengan halaman postingan ini.

Javascript untuk load komentar Disqus ini menyerupai di bawah ini.

     var disqus_loaded = false;
     function load_disqus() {
 
         // SIMPAN KODE JAVASCRIPT DISQUS DI BAWAH INI
        
     disqus_loaded = true;
     };
     window.onscroll = function(e) {
         if ((window.innerHeight + window.scrollY) >= (document.body.offsetHeight - 800)) {
             //hit bottom of page
             if (disqus_loaded==false)
                 load_disqus()
         }
     };

Silahkan simpan isyarat javascript Disqus di bawah isyarat // SIMPAN KODE JAVASCRIPT DISQUS DI BAWAH INI. Sebagai contoh, di bawah ini javascript load on scroll Disqus dengan isyarat javascript Disqus untuk universal code.

     var disqus_loaded = false;
     function load_disqus() {
 
         // SIMPAN KODE JAVASCRIPT DISQUS DI BAWAH INI
     (function() {  // DON'T EDIT BELOW THIS LINE
         var d = document, s = d.createElement('script');      
         s.src = '//username.disqus.com/embed.js';
         s.setAttribute('data-timestamp', +new Date());
         (d.head || d.body).appendChild(s);
     })();
        
     disqus_loaded = true;
     };
     window.onscroll = function(e) {
         if ((window.innerHeight + window.scrollY) >= (document.body.offsetHeight - 800)) {
             //hit bottom of page
             if (disqus_loaded==false)
                 load_disqus()
         }
     };

Kalau untuk javascript Disqus untuk Blogger akan tampak menyerupai di bawah ini.

     var disqus_loaded = false;
     function load_disqus() {
 
         // SIMPAN KODE JAVASCRIPT DISQUS DI BAWAH INI
 (function() {
     var bloggerjs = document.createElement('script');
     bloggerjs.type = 'text/javascript';
     bloggerjs.async = true;
     bloggerjs.src = '//'+disqus_shortname+'.disqus.com/blogger_item.js';
     (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(bloggerjs);
 })();
 (function() {
     var bloggerjs = document.createElement('script');
     bloggerjs.type = 'text/javascript';
     bloggerjs.async = true;
     bloggerjs.src = '//'+disqus_shortname+'.disqus.com/blogger_index.js';
     (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(bloggerjs);
 })();
        
     disqus_loaded = true;
     };
     window.onscroll = function(e) {
         if ((window.innerHeight + window.scrollY) >= (document.body.offsetHeight - 800)) {
             //hit bottom of page
             if (disqus_loaded==false)
                 load_disqus()
         }
     };

Atau dapat juga menyerupai di bawah ini

     var disqus_loaded = false;
     function load_disqus() {
 
         // SIMPAN KODE JAVASCRIPT DISQUS DI BAWAH INI
 (function () {
     "use strict";
     var get_comment_block = function () {
         var block = document.getElementById('comments');
         if (!block) {
             block = document.getElementById('disqus-blogger-comment-block');
         }
         return block;
     };
     var comment_block = get_comment_block();
     if (!!comment_block) {
         var disqus_div = document.createElement('div');
         disqus_div.id = 'disqus_thread';
         comment_block.innerHTML = '';
         comment_block.appendChild(disqus_div);
         comment_block.style.display = 'block';
         var dsq = document.createElement('script');
         dsq.async = true;
         dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
         (document.getElementsByTagName('head')[0] || document.body).appendChild(dsq);
     }
 })();
        
     disqus_loaded = true;
     };
     window.onscroll = function(e) {
         if ((window.innerHeight + window.scrollY) >= (document.body.offsetHeight - 800)) {
             //hit bottom of page
             if (disqus_loaded==false)
                 load_disqus()
         }
     };

Bagaimana, gampang bukan? Selamat mencoba...
Sumber https://www.kompiajaib.com/

Share this post