ITPub博客

首页 > IT职业 > IT生活 > js加载前显示loading(页面加载前)

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

IT生活 作者:jmj83 时间:2021-09-09 10:08:20 0 删除 编辑

  工作中遇到,需要加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";                }        }

来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/1065/viewspace-2817214/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-04-15

  • 博文量
    0
  • 访问量
    467