设计一个装载Loading页面的div

此处设置的height100vhvh单位表示浏览器的可视高度百分比,100vh表示浏览器高度的100%,如果是全屏Loading,则该div需要排在body标签中最前面。

<body>
    <div id="loader" style="position: relative;width: 100%;height: 100vh">
        <!--Loading页面这里写页面内容进行封装-->
    </div>
    ...
</body>

js脚本

使用$(window).on('load', function(){ });则等待所有元素加载完毕才隐藏loading页面。

<body>
   ...
   <script>
          $(window).on('load', function(){
            $('#loader').hide(0);
          });
   </script>
   ...
</body>
Last modification:February 14th, 2020 at 10:47 am
如果觉得我的文章对你有用,请随意赞赏