How to properly make a preloader a page

user_15666508 0
Viewed 204

I have a site which performs some data-fetching on load. I am trying make a preloader to this site that is only shown for however long it takes the site to fully load and complete any initial requests.

I've seen tutorials for preloaders where they just set a time interval on the loader, but I'm trying to make the loader actually wait for the page to load.

Any tips?

loader node.js css html javascript
1 Answers

You can use async functions

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');
});

user_153359540
Related