标签：... loading 实现 loading2 hidden 页面 document 加载

• 页面加载完毕再显示

<!- 放在页面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>

标签：...,loading,实现,loading2,hidden,页面,document,加载
来源： https://www.cnblogs.com/yanruizhe/p/15140003.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。