炫意html5
最早CSS3和HTML5移动技术网站之一

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

目前具体思路是通过轮询构建头像,条件是通过判断评论区条目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="https://q.cnblogs.com/q/127580/${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)
}

请问如何解决呢?

回答

问题已解决,代码如下:

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="https://q.cnblogs.com/q/127580/${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()
}

炫意HTML5 » 请问如何完美显示评论列表头像

Java基础教程Android基础教程