页面 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>