Necesito ejecutar la pantalla de carga durante 10 segundos y luego eliminarla . Y también probé con setTimeOut pero no funciona como lo necesitaba. Busqué muchos tutoriales y solo enseñan cómo agregar una animación de carga hasta que se carga la página. Por favor, muéstrame el camino a las personas mayores.
const loading = document.querySelector(".loader"); window.addEventListener('load', function() { loading.style.display = "none"; }); .loader-wrapper { width: 100%; height: 100%; position: absolute; top: 0; left: 0; color: white; background-color: #242f3f; display: flex; justify-content: center; align-items: center; z-index: 4; } <div class="loader">Loading...</div> <div class="content">content</div>Creo que setTimeout funcionará bien aquí. Si solo desea bloquear la ejecución de código adicional antes de que finalice la carga, puede usar async/await, consulte esta publicación .
const loading = document.querySelector(".loader"); const content = document.querySelector(".countdown"); let countdown = 10 document.addEventListener('DOMContentLoaded', function() { setTimeout(() => { loading.style.display = "none"; }, 10000) setInterval(() =>{ countdown-- content.innerHTML = countdown },1000) }); .loader-wrapper { width: 100%; height: 100%; position: absolute; top: 0; left: 0; color: white; background-color: #242f3f; display: flex; justify-content: center; align-items: center; z-index: 4; } <div class="loader">Loading...</div> <div class="content">content</div> <div class="countdown">10</div>Debe usar funciones asíncronas si planea esperar a que finalice el tiempo de espera y el código posterior se ejecute solo después de eso. También puede ocultar el contenido para que no se muestre durante tanto tiempo (por ejemplo, 10 segundos) y solo después de que se complete el temporizador, se mostrará el contenido y se ocultará el cargador.
Nota: cualquier código asíncrono que escriba se elimina del flujo de ejecución normal y si su lógica adicional (síncrona o asíncrona) debe ejecutarse solo después de completar esa tarea asíncrona , entonces debe await usando la palabra clave await.
const loading = document.querySelector(".loader"); const content = document.querySelector(".content"); content.style.display = "none"; window.addEventListener('load', async function() { await setTimeout(()=>{ content.style.display = "block"; loading.style.display = "none"; }, 10000) }); .loader-wrapper { width: 100%; height: 100%; position: absolute; top: 0; left: 0; color: white; background-color: #242f3f; display: flex; justify-content: center; align-items: center; z-index: 4; } <div class="loader">Loading...</div> <div class="content">content</div>