Hi I've static website(made with Hugo) with Disqus installed. My website load time is really affected by ~30% in negative. So, I wish I could prevent it from loading it until a person reaches to that section or a better approach is that there'll be 'show comments' button that totally leave on visitor to decide.
I'm already using lazyload(lozad js library) but it's not working with disqus even I tried following code too
var iframes = doc.querySelectorAll('iframe');
iframes.forEach(function (e){
e.classList.add('lozad'); // adds required 'lozad' class
var iframeAttr = e.getAttribute('src');
e.setAttribute('data-src', iframeAttr); // lozad needs source data in data-src attribute
e.setAttribute('src', ''); // empty src attribute so that library use it at right time
});
Zachary wrote a tutorial for Hugo sites on how to display a Show comments button and have the Disqus comments only displayed when a reader click on the button.
As a bonus, the Disqus Javascript file embed.js will only load when the button is clicked.
To add this to your site, first, create a partial and name it disqus.html. Inside this file, put the following code:
<div id="disqus-container">
{{ with .Site.DisqusShortname }}
<button id="disqus-button" onclick="showComments()">Show comments</button>
<div id="disqus-comments">
{{ $isDummyName := eq . "yourdiscussshortname" }}
{{ $isServer := $.Site.IsServer }}
{{ if or $isDummyName $isServer }}
<p>Disqus comments are disabled.</p>
<script type="application/javascript">
function showComments() {
{{ partial "disqus-js-common.js" . | safeJS }}
}
</script>
{{ else }}
<div id="disqus_thread">
</div>
<script type="application/javascript">
function showComments() {
{{ partial "disqus-js-main.js" . | safeJS }}
{{ partial "disqus-js-common.js" . | safeJS }}
}
</script>
{{ end }}
<noscript>Enable JavaScript to view Disqus comments.</noscript>
</div>
{{ end }}
</div>
Then, create two Javascript files. First one call it disqus-js-common.js. Inside this file, add the following code:
// Remove button
var disqusButton = document.getElementById('disqus-button');
disqusButton.parentNode.removeChild(disqusButton);
// Un-hide comments
var disqusComments = document.getElementById('disqus-comments');
disqusComments.style.display = 'block';
The second Javascript file call it disqus-js-main.js. And inside this one, add the following code:
// Config
var disqus_config = function () {
};
// Build and append comments
var d = document;
var s = d.createElement('script');
s.async = true;
s.src = '//' + "{{ . }}" + '.disqus.com/embed.js';
s.setAttribute('data-timestamp', + new Date());
(d.head || d.body).appendChild(s);
Finally, add a little bit of CSS to make everything looks better:
#disqus-container {
font-size: 0.85rem;
border: 1px solid;
padding: 1.5rem;
}
#disqus-button {
width: 100%;
}
#disqus-comments {
display: none;
}
#disqus-comments,
#disqus-comments iframe {
max-height: 65vh !important;
overflow-y: auto;
}