如何显示页面加载div，直到页面加载完成

一尘不染

如何显示页面加载div，直到页面加载完成

javascript

我的网站上有一个版块，在进行一些密集的通话时加载速度很慢。
知道如何div在页面准备时显示类似于“加载”的内容，然后在一切准备就绪时消失吗？

阅读 692

2020-05-06

共1个答案

一尘不染

我需要这个，经过一番研究，我想到了这个（需要jQuery）：

首先，在标签之后添加以下代码：

<div id="loading">
  <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>

然后将div和图片的样式类添加到CSS：

#loading {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  display: block;
  opacity: 0.7;
  background-color: #fff;
  z-index: 99;
  text-align: center;
}

#loading-image {
  position: absolute;
  top: 100px;
  left: 240px;
  z-index: 100;
}

然后，将此JavaScript添加到您的页面中（当然，最好在页面结尾处，在结束标记之前）：

<script>
  $(window).load(function() {
    $('#loading').hide();
  });
</script>

最后，background-colour使用样式类调整加载图像的位置和div 的位置。

就是这样，应该可以正常工作。但是，当然，您必须在ajax-loader.gif某个地方。免费赠品在这里。（右键单击>将图像另存为…）

2020-05-06