Question

我正在尝试为我的单页网站制作进度条，一切正常，我想要的除非页面加载进度条在100％而不是0％，直到我开始滚动。这是我的代码：

HTML

.progressContainer{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 10px;
    background-color: rgba(0,0,0,0.65);
}

.progress{
    height: 10px;
    background: #D66A00;
    border-radius: 0;
}

CSS

function updateProgress(num1, num2){
    var percent = Math.ceil( num1 / num2 * 100 ) + '%';
    document.getElementById('progress').style.width = percent;
}

window.addEventListener('scroll', function(){
    var top = window.scrollY;
    var height = document.body.getBoundingClientRect().height - window.innerHeight;
    updateProgress(top, height);
});

的JavaScript

dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
    NSLog(@"Downloading Started");
    NSString *urlToDownload = @"http://wallpapercave.com/wp/66iglE0.jpg";
    NSURL  *url = [NSURL URLWithString:urlToDownload];
    NSData *urlData = [NSData dataWithContentsOfURL:url];
    if ( urlData )
    {
        dispatch_async(dispatch_get_main_queue(), ^{
          UIImageWriteToSavedPhotosAlbum( [UIImage imageWithData:urlData],
                                               self,
                                               @selector(done),
                                               NULL);               
 });
    } else {
         NSLog(@"Failed");
    }
});

样本

https://codepen.io/Klak031/pen/xdXYgb/

Answer 1

css中的一个小故障可以解决问题。将width:0%添加到progress class，您就可以了。

.progress{
    height: 10px;
    background: #D66A00;
    border-radius: 0;
    width:0%;
}

这是更新的codepen： https://codepen.io/anon/pen/mmBXXB

Answer 2

如果你没有设置进度类的宽度，它将被设置为默认为auto，并将填充父元素，在本例中为progressContainer类，其宽度为100％。

.progress{
    height: 10px;
    background: #D66A00;
    border-radius: 0;
    widht: 0;
}

我希望它能帮助您理解问题的解决方案。

Answer 3

您需要在准备就绪时使用不同的功能。

$(document).ready(function(){
  updateProgress(0, 100);
});

Edited Codepen

更新：实际上没有必要对文件准备做任何事情，我的不好。设置

.progress { width: 0;}

会做到这一点。

进度条100％负载

3 个答案: