How to lazyload comments using JQuery? (RemarkBox)

support
1

I recently switched to remark box for comments and I’m having trouble lazyloading it…
I want to add a click to show comments button, and when user clicks on that the script should load!

My Blog: Geek’s World
Theme: Casper Two
Git repo: Github

You can see how I did it in disqus by going to commits section.

This is the script that I want to load at click!

    <noscript>
    <iframe id=remarkbox-iframe src="https://my.remarkbox.com/embed?nojs=true" style="height:600px;width:100%;border:none!important" tabindex=0></iframe>
  </noscript>
</div>
<script src="https://my.remarkbox.com/static/js/iframe-resizer/iframeResizer.min.js"></script>
<script>
  var rb_owner_key = "mykey";
  var thread_uri = window.location.href;
  var thread_fragment = window.location.hash;
  function create_remarkbox_iframe() {
    var src = "https://my.remarkbox.com/embed?rb_owner_key=" + rb_owner_key + "&thread_uri=" + thread_uri;
    var ifrm = document.createElement("iframe");
    ifrm.setAttribute("id", "remarkbox-iframe");
    ifrm.setAttribute("scrolling", "no");
    ifrm.setAttribute("src", src);
    ifrm.setAttribute("frameborder", "0");
    ifrm.setAttribute("tabindex", "0");
    ifrm.setAttribute("title", "Remarkbox");
    ifrm.style.width = "100%";
    document.getElementById("remarkbox-div").appendChild(ifrm);
  }
  create_remarkbox_iframe();
  iFrameResize(
    {
      checkOrigin: ["https://my.remarkbox.com"],
      inPageLinks: true,
      initCallback: function(e) {e.iFrameResizer.moveToAnchor(thread_fragment)}
    },
    document.getElementById("remarkbox-iframe")
  );
</script>
2

This is a Hugo forum. Your post belongs on a jQuery forum.