Javascript Load On Scroll Disqus Comment

Javascript Load On Scroll Disqus Comment

Bola Hero Gawai

Javascript Load On Scroll Disqus Comment

Javascript Load On Scroll Disqus Comment
Pagi ini saya akan bagikan oleh-oleh dari jalan-jalan bersama mbah Google hehehe... Kemarin saya nemuin sebuah web yang menarik perhatian saya yaitu komentar disqus di-load ketika halaman web di-scroll ke bawah.

Hal ini cukup bagus untuk menghemat loading blog karena ketika halaman dibuka, JS Disqus tidak ikut di-load. JS Disqus baru diload ketika halaman di-scroll ke bawah.

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

Untuk live demonya Anda bisa coba dengan halaman postingan ini.

Javascript untuk load komentar Disqus ini seperti 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 kode javascript Disqus di bawah kode // SIMPAN KODE JAVASCRIPT DISQUS DI BAWAH INI. Sebagai contoh, di bawah ini javascript load on scroll Disqus dengan kode 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 seperti 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 bisa juga seperti 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, mudah bukan? Selamat mencoba...

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×