JS before loading display loading (before page load)

Work encountered, need to add loading. 1, using the jquery load method to read the page, page read before the completion of the display loading. 2, Homepage js loading too slow, page loading completed before the display loading. (1). jquery. Load () method, display loading <!--main_loading html--><div id= "main_loading" style= "Display:block" before load finishes ;p osition: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, click to show Div, load complete hidden--$ ("#menu1"). Click (function () {$ (' #main_loading '). Show (); $ (' #main-page '). Load (' page_a.html ', function () {$ (' #main_loading '). Hide (); }); }) 2, first page loading completed before display loading <!--main_loading Default display-///first page load loading document.onreadystatechange = completeloading; Remove loading effect function completeloading () {if (document.readystate = = "complete") when the load status is complete { document.getElementById (' main_loading '). style.display= "None"; } else{document.getElementById (' main_loading '). style.display= "Block";}}

JS before loading display loading (before page load)