首页 新闻 搜索 专区 学院

请问如何完美显示评论列表头像

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)
}

请问如何解决呢?

guangzan的主页 guangzan | 菜鸟二级 | 园豆:229
提问于:2020-05-28 16:40
< >
分享
最佳答案
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()
}
guangzan | 菜鸟二级 |园豆:229 | 2021-09-01 11:20
其他回答(1)
0

代码初步看没啥问题,但是应该还有其他的js代码,有时显示不全可能跟js加载有关系,你可以往这个方向研究看看。

收获园豆:20
田坤坤 | 园豆:252 (菜鸟二级) | 2020-05-28 17:50
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册