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

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


于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 评论分页异步加载