Question

首先，这是我通常加载评论的方式。

HTML 标记：

<div id="comments">

    <div id="disqus_thread">

        <!-- Comments are dynamically loaded (via JS) here. -->

    </div>

</div>

JavaScript 代码（custom.js）：

$j=jQuery.noConflict();

$j(document).ready(function() {

    $j('#displayComments');
    var disqus_shortname = 'paulund';

    $j.ajax({
        type: "GET",
        url: "http://" + disqus_shortname + ".disqus.com/embed.js",
        dataType: "script",
        cache: true
    });

});

现在，重点......

我想加载评论，只有当用户向下滚动到评论部分时，即div#comments。

虽然不是为了这个目的，但我被告知Twitter Bootstrap's Scrollspy plugin可以用来做这件事。

但我不确定如何。

（我已经阅读了文档并尝试了各种标记，但无法使其工作;并决定从头开始。）

以下是要测试的评论的框架：http://jsfiddle.net/MvTgk/（及其respective demo）

PS：如果您没有时间撰写完整的答案，请在评论中删除任何提示/建议。我很乐意亲自尝试一下。

Answer 1

好吧，考虑到Twitter Bootstrap的Scrollspy不是出于我追求的目的，我选择了jQuery Waypoints。仅当部分进入视图时，延迟加载注释现在非常简单。

以下是我必须修改JavaScript代码的方法：

$j = jQuery.noConflict();
$j(document).ready(function () {

    $j('#comments').waypoint(function () {

        var disqus_shortname = 'paulund';
        $j.ajax({
            type: "GET",
            url: "http://" + disqus_shortname + ".disqus.com/embed.js",
            dataType: "script",
            cache: true
        });

    }, { offset: '100%', triggerOnce: true });

});

备注：

offset: '100%' is used to make sure只要div#comments进入视图就会显示Javascript评论（从底部开始向下滚动），而不仅仅是当它到达时view-port的顶部，这是默认值。

triggerOnce: true确保动作仅触发一次，即航点在其第一次触发后将自行销毁（即每次用户向上/向下滚动页面时都不会触发）。这与在回调函数末尾调用.waypoint('destroy')相同。

Answer 2

ScrollSpy插件可能不是你应该使用的。

根据Bootstrap文档“ScrollSpy插件用于根据滚动位置自动更新导航目标”。因此，它只应该用于此。

由于您使用的是jQuery，因此可以使用Sizzle检查评论框is visible的时间。

$(window).on("scroll", function check() {
    if( $('#displayComments').is(':visible') ) {
      // Remove event listener as it is not needed anymore
      $(window).off("scroll", check);

      $.ajax({
          type: "GET",
          url: "http://" + disqus_shortname + ".disqus.com/embed.js",
          dataType: "script",
          cache: true
      });      

    }
});

使用Twitter Bootstrap的Scrollspy来延迟加载（滚动加载）异步JavaScript？

2 个答案: