即使在 html 网站上具有 css 效果的 Jquery 页面加载

Question

我创建了一个 top show 通知，它会在 5 秒后自动隐藏。我面临的问题是，由于我的网页中有更多的样式表和 js 文件，页面加载时间在我的通知显示和隐藏之间增加了，但由于我的网页加载延迟，我没​​有正确看到它。

我能做什么？

当我们添加 jquery 时可以解决，如果页面完全加载，那么在此通知之后显示否则不显示。但我不熟悉 jquery 或 JavaScript，请求帮助任何想在这里帮助我创建 jquery 或解决此问题的人。

我的代码如下。

#myTostwarning {        
        position: absolute;
        top:0;left:0;        
        border-radius:0;
        font-size:14px;
        margin:0;
        width:100%;
        z-index:1000;
        overflow: hidden;
        background:#fff5b3;        
        line-height: 16px;
        padding:18px 36px; 
        -webkit-box-shadow:2px 2px 3px rgba(0,0,0,.1);
        box-shadow:2px 2px 3px rgba(0,0,0,.1);
        cursor:default;color:#333;
        }
       #myTostwarning a{
       color: #333;
       }  
#myTosterror {      
        position: absolute;
        top:0;left:0;        
        border-radius:0;
        font-size:14px;
        margin:0;
        width:100%;
        z-index:1000;
        overflow: hidden;
        background:#f44336; 
        min-height:50px;
        line-height: 18px;        
        overflow: hidden;
        padding:18px 36px; 
        -webkit-box-shadow:2px 2px 3px rgba(0,0,0,.1);
        box-shadow:2px 2px 3px rgba(0,0,0,.1);
        cursor:default;color:#fff;     
        } 
       #myTosterror a{
       color: #FFFFFF;
       }  
#myTostSuccess {
        position: absolute;
        top:0;left:0;
        border-radius:0;
        margin:0;
        overflow: hidden;
        width:100%;
        font-size:14px;
        z-index:1000;
        background:#83B655;
        min-height:50px;
        padding:16px 36px;    
        line-height: 16px;
        -webkit-box-shadow:2px 2px 3px rgba(0,0,0,.1);
        box-shadow:2px 2px 3px rgba(0,0,0,.1);
        cursor:default;color:#fff;
        }
        #myTostSuccess a{
       color: #FFFFFF;
       }  
#myTostnotice {
        position: absolute;
        top:0;left:0;
        border-radius:0;
        margin:0;
        width:100%;
        z-index:1000;
        overflow: hidden;
        font-size:14px;
        background:#033C83;
        min-height:50px;
        padding:16px 36px;
        line-height: 16px;  
        -webkit-box-shadow:2px 2px 3px rgba(0,0,0,.1);
        box-shadow:2px 2px 3px rgba(0,0,0,.1);
        cursor:default;color:#fff;
        }        
       #myTostnotice a{
       color: #FFFFFF;
       }  
.cssanimations.csstransforms #myTostSuccess,#myTosterror,#myTostwarning,#myTostnotice {
        -webkit-transform: translateY(-100%);
        -webkit-animation: slideDown 10.5s 0.1s 1 ease forwards;
        -moz-transform:    translateY(-100%);
        -moz-animation:    slideDown 10.5s 0.1s 1 ease forwards;
    }
    .cssanimations.csstransforms #close {
      display: none;
    }
    @-webkit-keyframes slideDown {
        0%, 100% { -webkit-transform: translateY(-100%); }
        1%, 99% { -webkit-transform: translateY(0px); }
    }
    @-moz-keyframes slideDown {
        0%, 100% { -moz-transform: translateY(-100%); }
        1%, 99% { -moz-transform: translateY(0px); }
    }

<div id='myTostwarning'>$msg</div>
<div id='myTostSuccess'>$msg</div>
<div id='myTostnotice'>$msg</div>
<div id='myTosterror'>$msg</div>

Answer 1

你可以使用

window.onload = function () { document.getElementById("myTostwarning").classList.add('Start-warning'); };

并在页面加载时更改类。