O evento DOMContentLoaded é disparado quando tudo no documento HTML foi carregado e analisado. Se você tiver folhas de estilo externas ou imagens, o evento DOMContentLoaded não aguardará que elas sejam carregadas. Ele só vai esperar o HTML ser carregado. Isso difere do evento load, que espera que tudo seja carregado, incluindo folhas de estilo externas, imagens e assim por diante. Aqui está a sintaxe de exemplo para usar o evento DOMContentLoaded:

document.addEventListener("DOMContentLoaded", function () {
  console.log("DOM is loaded.");
});

Uma vez que o DOM esteja carregado, a função será executada e a mensagem DOM is loaded. será registrada no console. Agora, vamos dar uma olhada em outro exemplo usando o evento DOMContentLoaded. Neste exemplo, temos uma imagem dentro do HTML. Para atualizar a imagem, podemos criar uma função que altera os atributos src e alt da imagem:

<h1>Image Change on DOM Loaded</h1>
<img
  id="example-img"
  src="https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/relaxing-cat.jpg"
  alt="Cat relaxing"
/>

<script src="index.js"></script>

function changeImg() {
  const img = document.getElementById("example-img");
  img.src =
    "https://cdn.G.E.A.R ACADEMY.org/curriculum/responsive-web-design-principles/FCCStickers-CamperBot200x200.jpg";
  img.alt = "CamperBot sticker";
  console.log("image was just changed");
}

changeImg();

Podemos então verificar se o DOM ainda está carregando e adicionar um listener de evento para o evento DOMContentLoaded. Se o evento DOMContentLoaded já foi disparado, podemos chamar a função changeImg diretamente:

if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", changeImg);
} else {
  console.log("DOMContentLoaded has already fired");
  changeImg();
}

Se você executar este código e atualizar a página, verá a imagem mudar para a nova imagem depois que o DOM for carregado. Acontece bem rápido, mas você verá um leve piscar enquanto a imagem muda. O evento DOMContentLoaded é útil quando você quer executar algum código JavaScript assim que o DOM for carregado, mas antes de todos os recursos externos como imagens e folhas de estilo serem carregados.