Jquery 在頁面開始實際加載之前加載 div

Question

我有一個頁面必須做相當多的工作（5-6 秒）來從初始連接的所有地方加載數據。 它很慢，因為我正在調用 api 端點，我無法控制它。

有沒有辦法在開始收集所有數據之前讓加載 div 顯示？

下面什么都不做。 我相信這是因為頁面在到達 jquery 之前就已經開始收集數據了。我可能是錯的。 myjs.js 是文件名，它是我頁面上加載的第一件事。

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

並做同樣的事情

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

通俗地說：

1. 用戶轉到https://somewebsite.com
2. Jquery 加載 div 顯示
3. 運行其他功能以收集數據
4. jquery 加載 div 已刪除。

如果有任何影響，這在 laravel 框架中。

Answer 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>

如果您 go 通過Mozilla關於document.readystatechange事件的文檔，您將看到瀏覽器如何處理加載順序並可以利用它來發揮您的優勢。 在我的示例中，我添加了一個容器div ，它將覆蓋用戶的視口。 然后設置一些點的樣式（添加您自己的 animation），這些點將在加載文檔時顯示。 當load到state時，占位符div會隱藏，顯示加載頁面。