页面 loading 实现

  • 页面加载完毕再显示

<!- 放在页面body的最前面 -->
<div id="loading" style="width:100%;height:100%;position:fixed;background:#fff;z-index:9990;top:0px;left:0px;transition: all 1s linear;opacity: 1;">
<div class="ld-content" style="position: absolute;top:50%;left: 57%;margin-left: -240px;margin-top: -120px;">
     <!- loading 动图 -->   
<img src="{% static 'images/Rocket.gif' %}" alt="">
<h2>加载中...</h2>
</div>
</div>
<!-- 放在 body 的最下面,等待页面加载完毕就会删除loading样式 -->
<script>
document.onreadystatechange = function(){
if(document.readyState == "complete"){
$("#loading").fadeOut();
}
}
</script>

  • 在进行一些操作时(上传,下载等一些需要等待的操作) 加loading的方法

可以在 js 里面通过 show 和 hide 来控制 loading 的显示和隐藏 。。opacity可以设置 div 元素的透明度,在此即 loading样式的透明度

$("#loading2").removeAttr("hidden") 显示

$("#loading2").prop("hidden", "hidden") 隐藏

 

<div id="loading2" style="width:100%;height:100%;position:fixed;background:#fff;z-index:9990;top:0px;left:0px;transition: all 1s linear;opacity: 0.8;" hidden>
<div class="ld-content" style="position: absolute;top:50%;left: 57%;margin-left: -240px;margin-top: -120px;">
<img src="{% static 'images/Rocket.gif' %}" alt="">
<h2>加载中...</h2>
</div>
</div>
上一篇:vue-pdf实现PDF文件流展示


下一篇:react构建项目后start失败:Error while loading rule 'jsx-a11y/alt-text'