kn007的个人博客
♥ You are here: Home > 软件与网络 > php > 添加了 AJAX 评论分页异步加载

添加了 AJAX 评论分页异步加载

by | 26 Comments

提醒:本文最后更新于 4744 天前,文中所描述的信息可能已发生改变,请仔细核实。


于2012-10-09日取消了这一功能,(有一调试没通过,其他主题仍然可用,如果没有使用即显评论的话)

在评论较多的文章中,如果评论没有分页,文章页面往往显得过长,但如果使用 WordPress 自带的分页,在读取下一页(或上一页)评论时又要刷新整个页面。很烦,所以搞了Ajax异步加载,这显得更具用户体验,具体的效果可以看看本博的评论部分(guestbook或者一些回复比较多的帖子)。

实现 Ajax 评论分页并不困难,只要在comments.php添加一段js,然后在style.css中加入一句css(暂时没有美化,或者图片,目前以文字loading为提醒)。当然前提是本身就已经加载了ajax,还有jQuery库。另外就是开启 WordPress 评论分页

Loper版--Js in PHP(即本博客主题):

<!--  -->
<script type="text/javascript">
jQuery(document).ready(function($) {
$body=(window.opera)?(document.compatMode=="CSS1Compat"?$('html'):$('body')):$('html,body');
$('.commentnav a').live('click', function(e){
    e.preventDefault();
    $.ajax({
        type: "GET",
        url: $(this).attr('href'),
        beforeSend: function(){
            $('.commentnav').remove();
            $('.commentlist').remove();
            $('#loading-comments').slideDown();
            $body.animate({scrollTop: $('.commentsays').offset().top - 65}, 800 );
        },
        dataType: "html",
        success: function(out){
            result = $(out).find('.commentlist');
            nextlink = $(out).find('.commentnav');
            $('#loading-comments').slideUp('fast');
            $('#loading-comments').after(result.fadeIn(500));
            $('.commentlist').after(nextlink);
        }
    });
});
});
</script>

 CSS:

#loading-comments {display: none; width: 100%; height: 45px; background: #A0D536; text-align: center; color: #fff; font-size: 22px; line-height: 45px; }

 最后一句话,想要拿走,另外有些人,不想多说了。

转载请注明转自: kn007的个人博客 的《添加了 AJAX 评论分页异步加载

donate
有所帮助?
Tags: , , , ,
Comments
26 Comments立即评论
  1. 我那个就是评论翻页需要刷新~很蛋疼~有视频或者音乐的时候就纠结了。

    1. MOD回复

      @Uncle.E: 呵呵,now you can fix it

    2. MOD回复

      @Uncle.E: 老实说,我就是音乐问题。。。 :cry:

  2. 回复

    对于ajax这事我还真没实际体验过。

    1. MOD回复

      @wmtimes: 评论没有刷新页面就是在体验ajax,ajax本身就是异步。有些主题,点击文章不会刷新而是直接载入,这也是ajax

  3. 这功能不错啊。。但是总是感觉js多了以后速度会降下来 所有有些东西能不来js就不来 虽然js做的效果的确很好!

    1. MOD回复

      @所谓刚子: 嗯,是的,现在存在js无法覆盖ajax内容。烦。 :cry:

  4. 上个社会化评论吧,费这事干嘛

    1. MOD回复

      @喜豆: 不用第三方

  5. LV5回复

    效果,源于生生不息滴折腾!

    1. MOD回复

      @Nemo: ...算是吧。。。只是现在出现个问题。live问题。。。边吃饭边想办法解决。。。下午还一堆公事。。。 :???:

  6. 回复

    表示大牛!!

    1. MOD回复

      @美国VPS: 没有啦。

  7. 真能折腾。

    1. MOD回复

      @大发: 表示一些js没过继要改其他js郁闷。。

  8. 我用多说评论了 :grin:

    1. MOD回复

      @Win8迷: 嗯,我去看了。

  9. 空了也折腾这个!

    1. MOD回复

      @水缘泡泡: 嗯,呵呵

  10. 回复

    好吧,我来吐槽一下。文章ajax分页、评论ajax分页,我的博客现在已经完全实现了,与文章、评论的内容无关。

    1. MOD回复

;-):|:x:twisted::smile::shock::sad::roll::razz::oops::o:mrgreen::lol::idea::grin::evil::cry::cool::arrow::???::?::!: