Lazy load Disqus

Disqus is a giant turd when loading, even without any comments it slows your site down. This script loads disqus when you scroll to a certain div.

by Robert Washbourne

HTML

<h2>
Top of page
</h2>
<h3>
Scroll down to see comments
</h3>
<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">
  <h2>
  Comments
  </h2>
  <p id="status">
  comments not open
  </p>
  <div id="disqus_thread"></div>
</div>

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
  
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.waypoints/2.0.5/waypoints.js"></script>

<script type="text/javascript">
// Disqus is a giant turd when loading, even without any comments it slows your site down.

// This script loads disqus when you scroll to a certain div aka comments
var loaded = 0; // make sure its only loaded once
var disqus_shortname = "devpy"; // change this to your shortname 
$('.comments').waypoint(function() {
    if (loaded == 0) {
           $.ajax({
               type: "GET",
               url: "https://" + disqus_shortname + ".disqus.com/embed.js",
               dataType: "script",
               cache: true
           });
          $("#status").text("comments open"); //status of comments. delete this if you like
        	loaded = 1;
    }
});
</script>

CSS

.comments {
  background-color: #eee;
  height: 500px;
}