等待页面加载直到方法完成

Question

我的网页的Javascript在加载网页时正在执行下面显示的代码。调用 get 可能需要几秒钟，因此我想等待调用完成后再加载页面。

是否可以将页面加载推迟到调用 get 完成？或者甚至更好的方法是显示一些纺车（而不是白页），以便用户知道某些过程正在进行中。这可能吗？

document.addEventListener("DOMContentLoaded", function(){
    if (!sessionStorage.getItem("userID")) {
        // Get new userID
        $.get("/new_user").done(function (data) {
            sessionStorage.setItem("userID", data);
        });
    }
});

Answer 1

我不确定您使用事件侦听器“DOMContentLoaded”的实现是否正确，我认为我们在这里缺少一些上下文，您可以在此之前检查会话存储，但我假设这部分是更正并解决您关于加载微调器的问题。

此外，我不会详细介绍如何制作负载微调器，因为那里有很多示例..但就让您的页面成为负载微调器而您的 ajax 调用是运行我会让函数异步并在调用之前将页面的 html 设置为加载微调器，然后在等待调用之后设置数据然后设置 html完成加载后你想要的样子

document.addEventListener('DOMContentLoaded', async (event) => {
        if (!sessionStorage.getItem("userID")) {
            document.getElementById('container').innerHTML = '<div>loadspinnerhtml</div>';
            var data = await $.get("/new_user")
            sessionStorage.setItem("userID", data);
            document.getElementById('container').innerHTML = '<div>theloadedhtml</div>'
        }
  });

等待页面加载直到方法完成

Waiting with page load until method finished

html

javascript

domcontentloaded