DOMContentLoaded and Load are useful for that purpose (link)

DOMContentLoaded – the browser fully loaded HTML, and the DOM tree is
built, but external resources like pictures and stylesheets may
be not yet loaded.

load – not only HTML is loaded, but also all the
external resources: images, styles etc.

Load should be used only to detect a fully-loaded page. It is a common mistake to use load where DOMContentLoaded would be more appropriate.

    window.addEventListener('DOMContentLoaded', (event) => {
        console.log('DOM fully loaded and parsed');
    });

   //===================

   window.onload = function() { 
    // same as window.addEventListener('load', (event) => {
    alert('Page loaded');

    // image is loaded at this time
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
   };

As per your question, you want to check after the form submission. So When the form submits, window gets reloaded and entire doc reloads.

Also you can use the document.readyState to check the documents is loaded fully or not.

The document.readyState property can be used to check if the document
is ready. From MDN:

Values The readyState of a document can be one of following:

loading – The document is still loading. interactive – The document
has finished loading and the document has been parsed but
sub-resources such as images, stylesheets and frames are still
loading. complete – The document and all sub-resources have finished
loading. The state indicates that the load event is about to fire.

You can use the below code.

    if(document.readyState === "complete") {
    // Fully loaded!
    }
    else if(document.readyState === "interactive") {
         // DOM ready! Images, frames, and other subresources are still 
       downloading.
    }
    else {
       // Loading still in progress.
       // To wait for it to complete, add "DOMContentLoaded" or "load" 
         listeners.

    window.addEventListener("DOMContentLoaded", () => {
        // DOM ready! Images, frames, and other subresources are still 
        downloading.
    });

    window.addEventListener("load", () => {
        // Fully loaded!
    });
 }

you could make use of onreadystatechange event and check the document readyState. If the readyState has value complete then show the alert.

The readystatechange event is fired when the readyState attribute of a document has changed

Or just load the javascript code at the end of the body.

Example:

document.onreadystatechange = () => {
  if (document.readyState === 'complete') {
     alert('loaded');
  }
};

You could use window.onload:

window.onload = function() {
  alert("loaded");
};

<button onclick="location.reload()">Reload</button>

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

I have a button that the user clicks and it submits a form and page reloads upon submitting. I want to check whether the reloading of the page is finished. I tried using the one below
but that gives the alert directly after the form is submitted even before the loading was finished.

if(window.performance.navigation.type == 0){
    alert('loaded');
}

How can I check if the loading is finished. Thanks in advance!