Jquery在页面开始之前加载div实际加载答案

【问题标题】：Jquery loading div before page starts actually loadsJquery在页面开始之前加载div实际加载
【发布时间】：2022-02-10 06:45:04
【问题描述】：

我有一个页面在初始连接时需要做大量工作（5-6 秒）从各地加载数据。由于我正在调用的 api 端点，它很慢，我无法控制它。

有没有办法让加载的 div 在开始收集所有数据之前显示？

下面没有做任何事情。我相信这是因为页面在到达 jquery 之前已经开始收集数据。我可能是错的。 myjs.js 是文件名，它是我页面上加载的第一件事。

$('body').on('load', function(){
    $body.addClass("loading");
});

做同样的事情

  $(document).ready(function() {
      $body.addClass("loading");
   });

通俗地说：

用户转到https://somewebsite.com
jQuery 加载 div 显示
运行其他函数来收集数据
jquery 加载 div 被移除。

这在 laravel 框架中，如果这会影响任何东西。

【问题讨论】：

你应该做相反的事情，将loading类添加到HTML源代码中的body，并在获取完成后将其删除。

标签： javascript html jquery

【解决方案1】：

实际上有一个非常简单的方法可以做到这一点。我最近经历过类似的事情。

我做了这样的事情：

window.addEventListener('load', (event) => {
  setTimeout(() => {
    $('.jumping-dots-loader').slideUp(650);
  }, 1000);
});

.jumping-dots-loader {
  width: 100vw !important;
  height: 100vh !important;
  background-color: white;
  z-index: 99999999999999999999999;
  display: block;
  border: none;
  border-radius: 0;
  margin: 0;
  position: fixed;
  padding: 20% 35%;
  text-align: center;
}

.jumping-dots-loader span {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: rgba(147, 194, 61, 1);
  margin: 35px 0.85rem;
}


/* Add in animation */

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="jumping-dots-loader">
  <span></span>
  <span></span>
  <span></span>
</div>

<h1>
  Howsit going?
</h1>

如果您通过Mozilla's docs 了解document.readystatechange 事件，您将看到浏览器如何处理加载顺序并可以利用它来发挥您的优势。在我的示例中，我添加了一个容器div，它将覆盖用户的视口。然后设置一些点的样式（向它们添加您自己的动画），这些点将在文档加载时显示。当达到load 状态时，占位符div 将被隐藏并显示加载的页面。

【讨论】：