Lazy load Disqus with Waypoints

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

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.waypoints/2.0.5/waypoints.js"></script>
<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>

CSS

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

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;
  }
});