javascript - 为什么我的加载不起作用

Question

为什么这个加载在 onloadstart 事件中不起作用？我需要当页面开始加载时，我的进度宽度在三秒内达到百分之五十。

HTML

<div class="loading">
        <div class="loading-progress"></div>
</div>

CSS

.loading {
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    padding: 20% 0;
    position: fixed;
    overflow: hidden;
    background: rgba(0,0,0,90);
}
.loading-progress{
    width: 0;
    padding: 2px;
    background: red;
}

和 Jquery

$(document).ready(function () {

    window.onload = function() {

        $('.loading-progress').animate({width:'100%'},'fast', function () {
            $('.loading').fadeOut('1000');
        });

    };

    window.onloadstart = function(){

        $('.loading-progress').animate({width:'50%'},3000)

    };

});

Answer 1

我将此动画用于 .loading-progress，我的问题得到了解决。

.loading-progress{
    width: 50%;
    padding: 2px;
    background: red;
    -webkit-animation: myfirst linear 3s; /* Chrome, Safari, Opera */
    animation: myfirst linear 3s;
}

@keyframes myfirst {
    0%   {width: 0;}
    100% {width: 20%;}
}

并删除 onloadstart 。