根据滚动事件在单个页面上加载Disqus注释

时间:2018-06-28 20:43:48

标签: javascript jquery scroll disqus

我在单个博客页面上应用了disqus注释,该页面由一页上的许多帖子组成。

<div>
     <article class='post hentry' expr:data-id='data:post.id' expr:data-url='data:post.url'>
    .............
    </article>
    <div class='showDisqus' data-title='MyTitle' expr:data-id='data:post.id' expr:data-url='data:post.url'>Show Comments</div>
</div>

<div>  
     <article class='post hentry' expr:data-id='data:post.id' expr:data-url='data:post.url'>
    .............
    </article>
    <div class='showDisqus' data-title='MyTitle' expr:data-id='data:post.id' expr:data-url='data:post.url'>Show Comments</div>
</div>

<div>
   <article class='post hentry' expr:data-id='data:post.id' expr:data-url='data:post.url'>
    .............
    </article>
    <div class='showDisqus' data-title='MyTitle' expr:data-id='data:post.id' expr:data-url='data:post.url'>Show Comments</div>
</div>

我使用以下代码。

$('.showDisqus').on('click', function(){   // click event of the show comments button
    var this_ = $(this);
        disqus_shortname = 'example',
        title = $(this).attr('data-title'),
        identifier = parseFloat($(this).attr('data-id')),
        url = $(this).attr('data-url');

    if (window.DISQUS) {

        DISQUS.reset({ // Remove the old call
          reload: false,
          config: function () {
          this.page.identifier = window.old_identifier;
          this.page.url = window.old_url;
          this.page.title = window.old_title;
          }
        });
        $('.showDisqus').show();
        $('#disqus_thread').remove();

        $('<div id="disqus_thread"></div>').insertAfter(this_);

        setTimeout( function() { // Creates a new call DISQUS, with the new ID
            DISQUS.reset({
              reload: true,
              config: function () {
              this.page.identifier = identifier;
              this.page.url = url;
              this.page.title = title;
              }
            });
            window.old_identifier = identifier;
            window.old_url = url;
            window.old_title = title;
        });

    } else {

        var disqus_identifier = parseFloat(identifier),
            disqus_title = title,
            disqus_url = url;

        $('<div id="disqus_thread"></div>').insertAfter(this_);

        (function() {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();

        setTimeout( function() { // Sorry, there must be a better way to force the ID called correctly
            DISQUS.reset({
              reload: true,
              config: function () {
              this.page.identifier = identifier;
              this.page.url = url;
              this.page.title = title;
              }
            });
        },500);

        window.old_identifier = identifier;
        window.old_url = url;
        window.old_title = title;

    }
    $(this).fadeOut();  // remove the show comments button
});
单击按钮,

disqus评论将显示在帖子下方,但是我想更简单一些,因此当访问者将屏幕滚动到帖子底部时,disqus评论将自动显示。我该怎么办?

0 个答案:

没有答案