在页面元素出现之前显示加载微调器/叠加层

Question

I would like to show a loading spinner before any of the page elements load, and then load the page elements while the loading overlay is still on. 我想在任何页面元素加载之前显示一个加载微调器，然后在加载叠加层仍处于打开状态时加载页面元素。 Is this possible? 这可能吗？ I am using this code but the page still loads elements before the spinner shows up. 我正在使用此代码，但是在微调器显示之前，页面仍会加载元素。

$(document).ready(function () {
            setTimeout(function () {
                $.loader.close();

                // Do something after 5 seconds
            }, 3000);
        });

Answer 1

 Add the below div right below the opening <body> tag.

 <div class="loader"></div>

 Add some .css

 .loader {
 position: fixed;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 100%;
 z-index: 9999;
 background: url('images/page-loader.gif') 50% 50% no-repeat rgb(249,249,249);
  }

 And jquery in header

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script type="text/javascript">
 $(window).load(function() {
 $(".loader").fadeOut("slow");
 })
</script>

At the end, look after a loading gif image. 最后，照顾一个加载的gif图像。 Google is full :) Google已满：)

在页面元素出现之前显示加载微调器/叠加层

问题描述

1 个解决方案

解决方案1
1 2015-03-08 17:31:47

在页面元素出现之前显示加载微调器/叠加层

问题描述

1 个解决方案

解决方案1 1 2015-03-08 17:31:47

解决方案1
1 2015-03-08 17:31:47