javascript - should preloader be inside DOMContentLoaded or load event

Question

I want to add a preloader to my website untill the website is fully loaded images, js, fonts everything but I'm confused which should I use

window.addEventListener('DOMContentLoaded', () => {
  // code
});

or

window.addEventListener('load', () => {
  // code
});

And if I used load or DOMContentLoaded should I stop using defer for my script files?

And also if I have imported modules should it be outside the event? For example:

import { gsap } from "gsap";
window.addEventListener('DOMContentLoaded', () => {
 // code
});

question from:https://stackoverflow.com/questions/65830873/should-preloader-be-inside-domcontentloaded-or-load-event

Answer 1

You can hide the preloader when the event you choose is triggered.

defer attribute This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded.

The DOMContentLoaded event will fire as soon as the DOM hierarchy has been fully constructed, the load event will do it when all the images and sub-frames have finished loading.

You could also read the documentation...

https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event

https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script