js加载前显示loading(页面加载前)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js加载前显示loading(页面加载前)相关的知识,希望对你有一定的参考价值。

  工作中遇到,需要加loading。1、用jquery的load方法读取页面,页面读取完成前显示loading。2、首页js等加载过慢,页面加载完成前显示loading。
        (1).jquery .load()方法,load完成前显示loading

    <!--main_loading的html-->
<div id="main_loading"  style="display:block;position:fixed;top:0;left:0;width:100%;height:100%;background:#f8f8f8;opacity:0.6;z-index:1000;">
        <div id="loading_gif" style="text-align:center;position:fixed;z-index: 9999;top:50%;left: 50%;">
                <div class="sk-spinner sk-spinner-cube-grid">
                        <div class="sk-cube"></div>
                        <div class="sk-cube"></div>
                        <div class="sk-cube"></div>
                        <div class="sk-cube"></div>
                        <div class="sk-cube"></div>
                        <div class="sk-cube"></div>
                        <div class="sk-cube"></div>
                        <div class="sk-cube"></div>
                        <div class="sk-cube"></div>
                </div>
        </div>
</div>

<!--js,点击后显示div,加载完成隐藏-->   
    $("#menu1").click(function(){
                        $(‘#main_loading‘).show();
                        $(‘#main-page‘).load(‘page_a.html‘,function () {
                                $(‘#main_loading‘).hide();
                        });
                })

            2、首页页面加载完成前显示loading

        <!--main_loading默认显示-->

         // 首页加载时loading
        document.onreadystatechange = completeLoading;
        // 加载状态为complete时移除loading效果
        function completeLoading() {
                if (document.readyState =="complete") {
                        document.getElementById(‘main_loading‘).style.display="none";
                }
                else{
                        document.getElementById(‘main_loading‘).style.display="block";
                }
        }

以上是关于js加载前显示loading(页面加载前)的主要内容,如果未能解决你的问题,请参考以下文章

用JQuery实现页面Loading的效果,即:当页面加载完成前显示Loading的进度条,全部加载完成之后进度条消失

JS问题:真实loading 页面加载完在显示页面

怎么让页面loading效果显示

fakeLoader页面加载前loading演示8种效果

jquery load加载动态页面

页面加载前 childNodes 列表为空