Estoy trabajando en un proyecto en el que se supone que debo desarrollar un juego de sitio web. Entonces, para eso, después de que el jugador pierde el juego, quiero reproducir un gif animado durante unos 5-10 segundos y luego el gif debería desaparecer. Soy un principiante en javascript, por lo que no tengo mucho conocimiento sobre esto, ¿cómo puedo lograrlo? Intenté agregar la función de precarga con algunas modificaciones pero no pude tener éxito. ¿Alguna otra forma de hacerlo?
var loader; function loadNow(opacity) { if (opacity <= 0) { displayContent(); } else { loader.style.opacity = opacity; window.setTimeout(function() { loadNow(opacity - 0.05); }, 50); } } function displayContent() { loader.style.display = 'none'; document.getElementById('content').style.display = 'block'; } document.addEventListener("DOMContentLoaded", function() { loader = document.getElementById('loader'); loadNow(1); }); #loader { position: fixed; width: 100%; height: 100vh; z-index: 1; overflow: visible; background: #fff url('loader.gif') no-repeat center center; } <body> <div id='loader'>div for placing the gif<div> <div id='content'> Actual body content in this div </div> </body>