Question

w =大家好，我想要实现的是进度条的动画即.progress div从document.ready上的0％宽度到document.load上的100％宽度但是我希望它能够平滑地动画 - 我有一种感觉，这可以通过CSS完成，但它不是跨浏览器，目前我的.progress div的宽度几乎直接达到100％的宽度。它包含div #overlay也会淡化document.ready ...任何想法？这是我现在拥有的东西;

CSS

.progress {
        width: 100%;
        height: 4px;
        background: none;
        position: absolute;
        top: 0;
        text-align: left;
}

.progress div {
       background: #000;
}

JQuery的

var progress = $('.progress div');

$(window).ready(function(){
    progress.css('width','0'+'%');

}); 

$(window).load(function(){
    //Set width to 100%
    progress.css('width','100'+'%');

   // PAGE IS FULLY LOADED  
   // FADE OUT YOUR OVERLAYING DIV
   $('#overlay').fadeOut();

});

HTML

    <div id="overlay">
        <div class="progress">
            <div class="bar"></div>
        </div>
        <div id="logo">
        <img src="images/logo.png">
        </div>
    </div>

提前感谢您提供任何帮助;）

修改

我尝试过使用css过渡，但是同样的情况发生了，它们只是直接变为100％而不是超过4s，如转换语句中所述 - 这显示在下面

 -webkit-transition: width 500ms ease-out 1s;
        -moz-transition: width 500ms ease-out 1s;
        -o-transition: width 500ms ease-out 1s;
        transition: width 500ms ease-out 1s;
}

Answer 1

使用动画

jsfiddle Example

 $(document).ready(function(){
var progress = $('.progress .bar');
//Set width to 100%
progress.animate({
  width:'100%'
}, 2000);
setTimeout(function() {
 $('#overlay').fadeOut();
}, 4000);

});

Answer 2

它向右射100％的原因是因为在文档就绪到窗口加载之间没有中介。

你的JS没有事件要说“Im XYZ％已完成加载对象”。 浏览器确实如此 - 但它仍在进行 LOT 工作以进行该集成（获取页面上所有元素的标题，文件大小和总和，因为它一切都进来了）。但是没有一个暴露于javascript - 这是内部浏览器引擎代码。

所以你只有一步 - 从dom-ready到窗口加载 - 这就是它启动的原因。另一个使用setTimeOut回答你问题的人只是模拟百分比加载 - 它不是真实百分比的真实表示。

不幸的是，你永远不会得到它。除非您正在进行大量的REST调用，否则AJAX会以原子方式调用和加载对象 - 您可以通过“我通过REST / AJAX / OWIN加载10个对象来模拟它”[请不要] - 触发每次完成一件事时都会碰到“事情。

在页面加载时使用Jquery加载栏

修改

2 个答案: