Lazy Loading Disqus with jQuery
HTML
<div class="stuff">
<h1>Lazy Loading Disqus</h1>
<p>based on <a href="https://gist.github.com/kirbysayshi/287426">kirbysayshi's gist</a></p>
<p>Scroll down to view comments!</p>
</div>
<div class="row-fluid">
<h2>Disqus Comments</h2>
<div id="disqus_thread"></div>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
</div>
CSS
.stuff {height: 400px}
h1 {font-size:1.4em;line-height:1.8em}
h2 {font-size:1.2em;line-height:1.4em}
p {line-height: 1.2en)
JavaScript
var ds_loaded = false,
top = $("#disqus_thread").offset().top;
window.disqus_developer = 1;
window.disqus_shortname = 'dragoncrew';
function check(){
if ( !ds_loaded && $(window).scrollTop() + $(window).height() > top ) {
$.ajax({
type: "GET",
url: "http://" + disqus_shortname + ".disqus.com/embed.js",
dataType: "script",
cache: true
});
ds_loaded = true;
}
}
$(window).scroll(check);
check();