2

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

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 的 Scrollspy 插件可用于执行此操作。

但我不确定如何。

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

这是要测试的评论的骨架：http: //jsfiddle.net/MvTgk/（及其各自的演示）

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

4

2 回答 2

3

好吧，考虑到 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%' 用于确保Javascript 注释在进入视图时立即显示（div#comments从底部，当我们向下滚动时），而不仅仅是当它到达视口的顶部时，这是默认设置。

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

于 2013-12-06T21:17:05.607 回答
0

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

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

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

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

    }
});
于 2013-12-06T19:49:36.243 回答