前言
博客园博客正文的评论区的每一条评论其实都是带用户头像链接的，因此有些博客主题利用这个链接，对评论新增了头像显示功能。
但是这部分功能只能在第一次加载页面时有效，一旦出现评论翻页、排序等操作，头像又没了。
为了解决这个问题 ，对#blog-comments-placeholder 这个元素进行改动监控，一旦有变动则再次执行一次头像设置函数。
实现过程
头像设置函数 setAvatar
/* 头像设置 */
setAvatar = function () {// 头像$.each($(".feedbackItem"), function (index, ele) {var self = $(ele);// 已经处理过了的则跳过if (self.find('comment_avatar_container').length > 0){return;}// 这里自己定义需要如何设置评论区头像可自行修改var obj = self.find(".blog_comment_body");var id = obj.attr("id").split("_")[2];var blog = self.find('a[id^="a_comment_author"]');var blogUrl = blog.attr("href");var imgSrc =$("#comment_" + id + "_avatar").html() ||"http://pic.cnblogs.com/avatar/simple_avatar.gif";self.prepend('<a class="comment_avatar_container" target="_blank" href="' +blogUrl +'"><img src="' +imgSrc +'" style="float:left;" class="comment_avatar"></a');$(".feedbackListSubtitle").addClass("feedbackListSubtitle_right");$(".feedbackCon").addClass("feedbackCon_right");});
}
头像更新 updateAvatar
/* 头像更新 */
updateAvatar = function()
{// 获取要监控的元素const targetNode = document.getElementById('blog-comments-placeholder');// 创建一个 MutationObserver 实例，并定义回调函数const observer = new MutationObserver((mutationsList) => {for (const mutation of mutationsList) {if (mutation.type === 'childList') {// console.log('A child node has been added or removed.');setAvatar();} else if (mutation.type === 'attributes') {// console.log('The ' + mutation.attributeName + ' attribute was modified.');}}});// 配置观察选项const config = {attributes: true,childList: true,subtree: false // 观察目标节点及其后代节点};// 启动观察observer.observe(targetNode, config);
}
评论区设置 setComment
/* 评论区 */
setComment = function () {$(".feedbackItem").ajaxComplete(function (event, xhr, option) {//评论头像if (option.url.indexOf("GetComments") > -1) {setTimeout(function () {setAvatar();}, 50);}}); updateAvatar();
};
页脚代码
<script>
$(function () {setComment();
});
</script>
效果测试
点击本博客评论数最多的博文进行查看：https://www.cnblogs.com/gshang/p/biliTheme.html#!comments
