js加載前顯示loading（頁面加載前）

  工作中遇到，需要加loading。1、用jquery的load方法讀取頁面，頁面讀取完成前顯示loading。2、首頁js等加載過慢，頁面加載完成前顯示loading。
        (1).jquery .load()方法，load完成前顯示loading

    <!--main_loading的html-->
<div id="main_loading"  >
        <div id="loading_gif" >
                <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";
                }
        }