Disqus Lazyloading using IntersectionObserver

index.html

<div id="disqus_thread">Loading Comments...</div>
<script>
var disqus_config = function () {
    this.page.url = "https://www.petanikode.com/flutter-web";
    this.page.identifier = "flutter-web";
    this.page.title = "Tutorial Membuat Web dengan Flutter";
};
</script>

lazydisqus.js

document.addEventListener("DOMContentLoaded", function () {
    let disqusThread = document.querySelector("#disqus_thread");

    if ("IntersectionObserver" in window) {
        if (disqusThread != null) {
            new IntersectionObserver((entries, observe) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        let d = document, s = d.createElement('script');
                        s.src = '//petanikode.disqus.com/embed.js';
                        s.async = true;
                        s.setAttribute('data-timestamp', +new Date());
                        (d.head || d.body).appendChild(s);
                        observe.unobserve(entry.target);
                    }
                });
            }).observe(disqusThread);
        }
    } else {
        // Possibly fall back to a more compatible method here
        console.log("Browser Not supported, plase upgrade!");
    }
});