请问如何完美显示评论列表头像
0
悬赏园豆：20
[已解决问题]
解决于 2021-09-01 11:38
目前具体思路是通过轮询构建头像，条件是通过判断评论区条目length。问题是有时依然无法显示评论区头像。以下是目前的代码：
function showAvatar() {
$('.feedbackItem').each(function() {
let avatar = $(this)
.children('.feedbackCon')
.children('span:last')
.html()
avatar = avatar
? avatar.replace('http://', 'https://')
: 'https://pic.cnblogs.com/face/sample_face.gif'
if (env === 'dev') avatar = 'https://www.dummyimage.com/50'
const ele = `<div class='custom-comment-avatar'><img src="${avatar}" class='avatar' /></div>`
$(this)
.children('.feedbackCon')
.prepend(ele)
})
}
function poll(condition, callback) {
if (condition) {
callback()
} else {
let count = 1
let intervalId = setInterval(() => {
if (condition) {
callback()
clearInterval(intervalId)
}
if (count === 30) {
clearInterval(intervalId)
}
count++
}, 100)
}
}
// 轮询显示头像
function pollToShow() {
if (pageName() !== 'post') return
poll($('.feedbackListSubtitle').length, showAvatar)
}
请问如何解决呢？
最佳答案
0
问题已解决，代码如下：
import { getCurrentPage } from 'utils/cnblog'
import { poll } from 'utils/helpers'
import { __DEV__ } from 'constants/env'
function buildAvatars() {
if ($('.custom-comment-avatar').length) {
return
}
$('.feedbackItem').each(function() {
let avatar = $(this)
.children('.feedbackCon')
.children('span:last')
.html()
avatar = avatar
? avatar.replace('http://', 'https://')
: 'https://pic.cnblogs.com/face/sample_face.gif'
if (__DEV__) avatar = 'https://www.dummyimage.com/50'
const ele = `<div class='custom-comment-avatar'><img src="${avatar}" class='avatar' /></div>`
$(this)
.children('.feedbackCon')
.prepend(ele)
})
}
function moveSupport() {
$('.comment_vote').each(function() {
$(this).appendTo(
$(this)
.parent()
.siblings('.feedbackListSubtitle'),
)
})
}
function authorRight() {
$('.feedbackItem').each(function() {
const isAuthor =
$(this)
.find('.louzhu')
.text() === '楼主'
? true
: false
if (isAuthor) $(this).addClass('custom-comments-author')
})
}
function build() {
buildAvatars()
moveSupport()
authorRight()
}
function listener() {
window.renderCommentsAvatars = build
$(document).ajaxComplete(function(event, xhr, option) {
if (
option.url.indexOf('PostComment/Add') > -1 ||
option.url.indexOf('DeleteComment') > -1
) {
new blogCommentManager().renderComments(0)
}
})
$(document).ajaxComplete(function(event, xhr, option) {
if (option.url.indexOf('GetComments') > -1) {
window.renderCommentsAvatars()
window.buildEmojis()
window.imagebox()
}
})
poll(() => $('.feedbackItem').length, build)
}
export default () => {
if (getCurrentPage() !== 'post') return
if ($('.custom-comment-avatar').lenght) return
__DEV__ ? build() : listener()
}
其他回答(1)
0
代码初步看没啥问题，但是应该还有其他的js代码，有时显示不全可能跟js加载有关系，你可以往这个方向研究看看。
收获园豆：20
