HTML实现进度条

最新推荐文章于 2025-03-04 09:51:34 发布

alpha105

最新推荐文章于 2025-03-04 09:51:34 发布

阅读量3.4k

点赞数 1

分类专栏： HTML 文章标签： html

本文链接：https://blog.youkuaiyun.com/alpha105/article/details/128585405

版权

HTML 专栏收录该内容

2 篇文章

订阅专栏

设置图片样式，将进度条图片放在images/目录下，命名为loading.gif。其中，gif加载图片可以在https://icons8.com/preloaders/中生成，如下图所示。

在head中添加样式文件，让图片处于屏幕中心位置。

<style>
    .loading{width:100%;height:100%;position:fixed;top:0;left:0;z-index:100;background:#ffffff;opacity:0.5;}
    .loading .pic{width:64px;height:64px;background:url(images/loading.gif);position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;}
</style>

在body中添加div标签，用于显示图片。

<div class="loading">
    <div class="pic"></div>
</div>

在document.onreadystatechange事件中通过document.readyState判断当前加载状态。

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script>
    document.onreadystatechange=function(){
        if(document.readyState=="complete"){
            $(".loading").fadeOut();
        }
    }
</script>

其中，document.readyState共有四种状态。

uninitialized	未开始加载
loading	正在加载
interactive	文档加载完成，但图片和样式等资源可能仍在加载。此时文档已经可以和用户交互
complete	完成加载