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

【问题标题】：Show loading spinner/overlay BEFORE page elements appear在页面元素出现之前显示加载微调器/叠加层
【发布时间】：2015-03-08 17:27:53
【问题描述】：

我想在任何页面元素加载之前显示一个加载微调器，然后在加载覆盖仍然打开时加载页面元素。这可能吗？我正在使用此代码，但页面仍会在微调器出现之前加载元素。

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

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

【问题讨论】：

$(document).ready 在加载所有 dom 元素后触发，因此它不适用于您的情况。
因此问题...

标签： javascript jquery html settimeout document-ready

【解决方案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>

最后，查看加载的 gif 图像。谷歌已满 :)

【讨论】：