如何正确地使预加载器成为页面

Question

我有一个站点可以在加载时执行一些数据获取。我正在尝试为该网站制作一个预加载器，该预加载器只显示该网站完全加载并完成任何初始请求所需的时间。

我看过预加载器的教程，它们只是在加载器上设置了一个时间间隔，但我试图让加载器真正等待页面加载。

有什么建议吗？

Answer 1

您可以使用 async 函数

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}

async function asyncCall() {
  console.log('calling');
  const result = await resolveAfter2Seconds();
  console.log(result);
  // expected output: "resolved"
}

window.addEventListener('load', async (event) => {
  let loading = true 
  // this loading value helps you to know when to show your loader

  await console.log('page is loading');
  await asyncCall()

  loading = false
  console.log('page is loaded');
});

如何正确地使预加载器成为页面

How to properly make a preloader a page

html

javascript

css

loader

node.js