CODEWITHSUNDEEP
javascriptloadaddeventlistenerpreloaderdomcontentloaded
Malte K
Malte K

Reputation: 23

Should I use load or domcontentloaded event for a preloader

I know, this is a duplicate question, but I want to get sure. I have got a javascript file and want to load a preloader before the content is loaded and not after.

Here is my script:

"use strict";

addEventListener('load', function () {

/* Hide Preloader */
document.getElementById("loader-background").style.display = 'none';
document.getElementById("loader").style.display = 'none';

});


addEventListener('DOMContentLoaded', ()=> {

  /* Navbar active state */
  const activeLink = document.querySelector(".nav-link[href='" + window.location.pathname + "']");
  if(activeLink) activeLink.classList.add("active");


  /* Burger-Menu toggle nav */
  const topNav      = document.getElementById("myTopnav");
  const burgerMenu  = document.getElementById("burgerMenu");

  burgerMenu.addEventListener("click", () => { 
    topNav.classList.toggle("responsive");
    burgerMenu.classList.toggle("toggleMenu");

  });

});

This can help too: Difference between DOMContentLoaded and load events

If I get it right, load will wait for images and fully loaded page and DOMContentLoaded will trigger before the page is loaded? So the preloader will wait and hide after all is done?

Edit: My script is in the html head.. should it be on the end of the body?

enter image description here

What I'm missing on my script?

Upvotes: 0

Views: 35

Answers (0)

Related Questions