显示加载微调器/叠加BEFORE页面元素出现

时间:2015-03-08 17:27:54

标签: javascript jquery html settimeout document-ready

我想在加载任何页面元素之前显示加载微调器,然后在加载叠加层仍然打开时加载页面元素。这可能吗?我正在使用此代码,但页面仍然在微调器显示之前加载元素。

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

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

1 个答案:

答案 0 :(得分: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图像。 Google已满:)