Question

所以我一直在研究我的网站上的加载屏幕。我终于找到一个（有点）工作。这是代码：

<script type="text/javascript">
/* display loader only if JavaScript is enabled, no JS-lib loaded at this point */
document.write('<div id="loader" style="display:table; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; background: #fff;">'
    + '<div style="display:table-cell; vertical-align:middle; text-align: center;">'
    + 'loading…<br /><img src="img/loading.gif" />'
    + '</div></div>');
</script>

将其放入标题中，此代码放在HTML的最底部（就在关闭正文标记之前）

  <script type="text/javascript">
  /* hide the loading-message */
  $(window).load(function(){
  $('#loader').fadeOut(500);
  });
  </script>
    </body>

这有效，但我意识到你可以在加载屏幕启动时向下滚动并看到它的网站很难看，生成表格。我怎样才能让你无法查看网站的其他部分，只看到加载gif？

Answer 1

将id加载器位置固定为div而不是绝对。

position:fixed;

Answer 2

您可以使用jQuery load方法

你可以看一下：

http://jqueryfordesigners.com/image-loading/

这是解决方案的一个实现

Answer 3

您可以在overflow: hidden;或html标记中添加body，以防止滚动页面。这可以在您的样式表中（并使用加载类激活）或内联。请务必在加载时将其删除，因为这会阻止页面滚动。

为了确保您的加载div保持在视口中，您还可以使用position: fixed;而不是绝对。

Answer 4

您可以通过添加样式属性visibility:hidden;来隐藏您的内容，并在加载页面时将其设置为visibility:visible;，这会在加载时隐藏您的内容。

如何只在网站加载时显示gif

4 个答案: