javascript - 使用网络 worker 在加载网页时创建进度条

标签 javascript html css web-worker

因为我有高分辨率图像...和很多背景图像和图形..这就是为什么我要网页加载所有包含,然后在所有加载时显示..但同时包含已下载我希望网页显示进度条显示下载进度包含....

是否有可能使用 webworks 完成下载,这样它就不会减慢浏览器的速度

我已经尝试了 display none 属性,但它没有削减它

最佳答案

如果我没理解错的话,您希望您的页面在页面未完全加载时显示加载屏幕。为此,请在您的 <body> 之后添加它标签:

<style>
    #load-bg {
        position: absolute;
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 0.75;
    }
    #load-msg {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        height: 20px;
        width: 100px;
        background: #fff;
    }
</style>

<div id="load-bg">
    <div id="load-msg">
        <p>Loading...</p>
    </div>
</div>

<script>
    window.onload(hideLoad());

    function hideLoad(){
        document.getElementById('load-bg').style.visibility = 'hidden';
    }
</script>

JSFiddle

关于javascript - 使用网络 worker 在加载网页时创建进度条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21362415/

相关文章:

html - 从高度0到100的过渡元素,从底部开始

css - 与 2 个内联 div 对齐?

javascript - php one_liner 如果与 javascript 相比

html - 使 html svg 对象也成为可点击的链接

css - 为列表设置导航栏

html - 如何使文本框靠近文本标签

CSS 3D 轮播元素不尊重 TranslateZ

php - 使用echo在php中输出javascript

javascript - Express:从远程计算机定义 View 文件夹

javascript - 在 Angular 4 的表单中按下按钮时,如何将表单状态更改为脏状态?