Блог

Главная - Вопросы по программированию - Воспроизведите анимированный gif на моем веб-сайте после события, используя javascript

Воспроизведите анимированный gif на моем веб-сайте после события, используя javascript

#javascript

Вопрос:

Я работаю над проектом, в рамках которого я должен разработать веб-игру. Поэтому для этого, после того как игрок проиграет игру, я хочу воспроизвести анимированный gif примерно на 5-10 секунд, а затем gif должен исчезнуть. Я новичок в javascript, поэтому у меня не так много знаний об этом, как я могу этого достичь? Я попытался добавить функцию предварительной загрузки с некоторыми изменениями, но не смог добиться успеха. Есть ли другой путь к этому?

 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>
Метки: ,