Загрузка gif во время выполнения скрипта - PullRequest
Новая
       24

Загрузка gif во время выполнения скрипта

0 голосов
/ 15 января 2020

Итак, у меня есть форма, и когда я ее отправляю, в Django выполняется backend script.py. Это делает некоторый статистический анализ, который занимает около 8 секунд, и когда он заканчивается, я перенаправлен на следующую страницу. Поэтому я пытался найти способ реализовать загрузочный GIF во время выполнения скрипта, но я потерпел неудачу во всех моих усилиях. Я думал об использовании AJAX и javascript метода onclick (или даже onsubmit), но они не работали.

Заранее всем спасибо.

1 Ответ

0 голосов
/ 16 января 2020

Я обнаружил, что эта статья в StackOverflow связана с кодом js. В основном в этом коде он проверяет, загружено ли что-то в тело. Если это не так, он показывает страницу загрузки, может быть, это поможет.
Вот ссылки
Показать изображение загрузки после нажатия кнопки и загрузки страницы 

function onReady(callback) {
    var intervalID = window.setInterval(checkReady, 1000);

    function checkReady() {
        if (document.getElementsByTagName('body')[0] !== undefined) {
        console.log(document.getElementsByTagName('body')[0]);
            window.clearInterval(intervalID);
            callback.call(this);
        }
    }
}

function show(id, value) {
    document.getElementById(id).style.display = value ? 'block' : 'none';
}

onReady(function () {
    show('page', true);
    show('loading', false);
});
body {
    background: #FFF url("http://i.imgur.com/KheAuef.png") top left repeat-x;
    font-family:"Brush Script MT", cursive;
}
h1 {
    font-size: 2em;
    margin-bottom: 0.2em;
    padding-bottom: 0;
}
p {
    font-size: 1.5em;
    margin-top: 0;
    padding-top: 0;
}
#page {
    display: none;
}
#loading {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100vw;
    height: 100vh;
    background-color: rgba(192, 192, 192, 0.5);
    background-image: url("http://i.stack.imgur.com/MnyxU.gif");
    background-repeat: no-repeat;
    background-position: center;
}
<div id="page">
     <h1>The standard Lorem Ipsum passage</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="loading"></div>
...