I am working on a project in which I am supposed to develop a website game. So for that, after the player loses the game, I want to play an animated gif for like 5-10 seconds and then the gif should disappear. I am a beginner at javascript, so I don't have much knowledge about this, how can I achieve this? I tried adding the preloading function with some modifications but could not succeed. Any other way to this?
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>