I've been trying for the last few days to Lazy load Livefyre or Disqus on scroll distance from top (as opposed to the usual triggers of loading once they reach to the comments section) so the comments are already loaded by the time the bottom of the post is reached.
I found this tutorial: http://christian.fei.ninja/how-to-lazy-load-disqus-comments/
But unfortunately I can't get it to work. After spending hours working my little knowledge of coding I've come to the discovery the reason nothing happens is because the disqus embed.js file throws an error itself. It attempts to use "appendChild" on an undefined variable in one of its functions. Their code is minified so I can't make any actual sense of the error.
My guess is that the tutorial is missing some HTML markup that is necessary for the discus embed code to work properly. So I've been trying to use Livefyre instead. This is what I have so far:
<head>
<script type="text/javascript" src="http://zor.livefyre.com/wjs/v3.0/javascripts/livefyre.js"></script>
<script type="text/javascript">
var comments = document.getElementsByClassName('comments')[0],
livefyreLoaded=false;
function loadLivefyre() {
var articleId = fyre.conv.load.makeArticleId(null);
fyre.conv.load({}, [{
el: 'livefyre-comments',
network: "livefyre.com",
siteId: "XXXX",
articleId: articleId,
signed: false,
collectionMeta: {
articleId: articleId,
url: fyre.conv.load.makeCollectionUrl(),
}
}], function() {});
livefyreLoaded = true;
}());
//Get the offset of an object
function findTop(obj) {
var curtop = 0;
if (obj.offsetParent) {
do {
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return curtop;
}
}
if(window.location.hash.indexOf('#comments') > 0)
loadLivefyre();
if(comments) {
var commentsOffset = findTop(comments);
window.onscroll = function() {
if(!disqusLoaded && window.pageYOffset > commentsOffset - 1500) {
console.log('load comments, NOW!!');
loadLivefyre();
}
}
}
</script>
</head>
<body>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="comments"></div>
</body>
But I know little about javascript and this is my poor patch job.