Javascript CSS样式在刷新后显示，然后使用敲除不可见

因此，我有一个新的通知样式环和绿色圆圈，其中包含未读通知。只有当您有新通知时，此圆圈才可见

当页面刷新时，即使没有通知，圆圈也会在一秒钟内可见，然后变为不可见

当刷新的圆圈显示为空或为零，然后变为不可见，然后显示正确的数字时，如果仍有新的通知

HTML：

<div class="bell">
    <div class="unseen-notification-show" data-bind="visible: UnSeenMessagesCount() > 0, text: UnSeenMessagesCount()" style="display:none"></div>
</div>

.unseen-notification-show {
    content: '';
    display: block !important;
    position: absolute;
    top: -10px;
    right: -8px;
    width: 17px;
    height: 17px;
    border: 1px solid #ffffff;
    background-color: #8cdb16;
    border-radius: 8px;
    cursor: pointer;
    z-index: 3;
    color: white;
    text-align: center;
    line-height: 15px;
    font-size: 11px;
    font-family: 'Times New Roman', Times, serif;
}

self.searchModel = new AuthorizedSearchViewModel();
self.Header = ko.observable(new HeaderModel());
self.UnSeenMessagesCount = ko.observable(0);
self.Messages = ko.observableArray();
self.CanShowRemindProfile = ko.observable(false);
self.Remind = ko.observable(new RemindModel());

self.LoadUserInformation = function () {
    $.post('/User/GetUserInfoForDashboardHeader',
        function (response) {
            InitTawkChat(response);
            self.Header(new HeaderModel(response));

            if ($('#accountId').length > 0) {
                $('#accountId').html(response.accountId);
            }

        }, "json").done(function () { console.warn("loaderOff"); });
};

self.GetRemindProfile = function () {
    self.CanShowRemindProfile(false);
    $.post('/User/GetRemindProfile', function (result) {
        if (result) {
            self.CanShowRemindProfile(true);
            self.Remind(new RemindModel(result));
        }
    });
};

self.GetMessages = function () {
    $.post('/Messages/GetAll', {
        page: 1,
        pageSize: 4
    }, function (result) {
        var notifications = [];

        _.map(result.Notifications, function (item) {
            notifications.push(new MessageModel(item));
        });

        self.Messages(notifications);
        self.UnSeenMessagesCount(result.UnseenNotifications);
    });
};

---

听起来像是一些加载问题。尝试将css从加载到HTML顶部移动到加载到底部/页脚

您要做的是隐藏圆，直到加载结果（0或1,2,3,4..等等，取决于通知的数量）

在您的

div

中，有一行

style=“display:none”>

隐藏了圆圈。太好了

现在，您应该确保

.unseen notification show

的样式包含

display:block！重要的不应在计算要显示的数字之前运行

一种方法是将加载css的文件放在HTML的底部（比如移动
）。或者另一种方法是只使用css进行隐藏，然后使用javascript/jQuery显示卷轴

如果这没有帮助-那么请提供您用来生成号码的代码。
我认为问题是由于
self.unseenmessagescont=ko.observable（0）；
因此，当您的模态被创建时，它被初始化为值0。因此，当您最初刷新页面时，它是0，但当调用self.getMessage时，它会更新您的值
 删除
！重要信息
来自css中的display属性，并让knockout内联句柄显示


函数viewModel（）{
var self=这个；
self.unseenmessagescont=ko.observable（）；
self.initData=函数（）{
//为ajax get设置虚拟超时。
setTimeout（函数（）{
自我看不见的信息（4）；
},1000);
}
}
var vm=new viewModel（）；
vm.initData（）；
ko.应用绑定（vm）
。不可见的通知显示{
内容：''；
显示：块；
位置：绝对位置；
宽度：17px；
高度：17px；
边框：1px实心#ffffff；
背景色：#8cdb16；
边界半径：8px；
光标：指针；
z指数：3；
颜色：白色；
文本对齐：居中；
线高：15px；
字体大小：11px；
字体系列：“泰晤士报新罗马”，泰晤士报，衬线；
}

尝试使用位置：相对；我试图先让div显示为none，然后用数据绑定css使其可见，但问题是圆圈可以工作，但我有数据绑定文本的数字，数字显示为0，与空圆圈一样显示，没有样式，然后消失，然后显示normali。所以我认为问题在于，数据绑定数据绑定和样式加载的速度比查找不可见通知号的代码要快。如果从
数据绑定中删除
visible:unseenmessagescont（）>0、
，并将css移到页脚，会发生什么？如果我删除visible，它将保持显示OK。我没有解决办法：(