Мне нужно сделать «загрузочную страницу», пока следующая страница работает

Question

У меня есть форма, которая отправляется на следующую страницу.

В настоящее время эта следующая страница выполняет несколько команд, прежде чем она будет готова для загрузки страницы.

Что происходит сейчас: Форма отправлена ​​с Get или Post в течение многих секунд ничего не происходит. Такое впечатление, что страница зависла. Следующая страница отображается только после того, как произошла серия событий (в данном случае создание PDF с imagemagick), наконец, следующая страница загружается только после всего выполнения. Я попытался добавить немного JavaScript, чтобы показать «загрузочное» сообщение на следующей странице, которое работает, но ТОЛЬКО после создания PDF. Не преодолевает «зависший» внешний вид. По причинам, я не могу вдаваться здесь в сценарии команды не вариант, попробовал это.

Что я хочу: Я не гуру javascript, так что прости меня за это, но я верю, что могу создать событие onclick, которое при отправке формы (и это важно) показывает сообщение о загрузке? Это означает, что нажатие кнопки «Отправить» по-прежнему запускает традиционную следующую страницу, но javascript fu приведет к появлению сообщения «загрузки», желательно с наложением. Конечно, после загрузки следующей страницы это наложенное сообщение исчезнет.

Я видел несколько решений для такого рода вещей, но никогда не было сообщения javascript, пока все еще отправлял форму

Короче говоря, я хочу, чтобы моя существующая кнопка отправки все еще работала так же, как и сейчас, но для этой кнопки нужно запустить вторую функцию, которая не отображает сообщение о загрузке

Заранее спасибо, если кто-нибудь может показать мне пример того, как это сделать.

Я попробовал это, но, как я сказал, нет гуру javascript. Я сделал это из других мест и нашел то, что нашел, но не работает.

Сообщение

<div id="loading" style="display:none;>
    <table border=0 style="width: 30%"><tr><td><hr></td></tr><tr><td style="text-align: center;">
    <span style="color:#666; font-weight:bold"><br/><br/>Please wait , Thinking...</span></br></br><br/>
    <img src="../images/spinner.gif"></td></tr></table>
</div>

Кнопка

<button id="makemppdfnow" onclick="javascript:loadingWait();" style="float: left; height: 36px; background-image: url(images/makepdf btn.png); background-repeat: no-repeat; background-position: left;padding left: 39px; color:#666; font-weight:bold" type="submit" formaction="/mkmppdf.php">'.$makepdf.'</button>

1025 * Javascript *

function loadingWait() {
    if (document.getElementById('makemppdfnow').click) {
        document.getElementById('loading').style.visibility = 'visible';
    } else {
        document.getElementById('loading').style.visibility = 'hidden';
    }

Answer 1

Если ваш вопрос о том, почему не отображается div «loading», найдите приведенный ниже скрипт и внесите соответствующие изменения. Вы установили отображение: none для div «loading», поэтому вам нужно изменить стиль отображения вместо изменения видимости.

<script>
boolean =false;
function loadingWait() {
boolean = true;

if(boolean ==true){
        document.getElementById('loading').style.display = 'block';
                  } 
else {
       document.getElementById('loading').style.display = 'none';
       boolean = false;
     }
    }
    </script>

И измените onclick = "javascript: loadingWait ();" to onclick = "loadingWait ();"

Answer 2

вы забыли закрыть скобку.

Я думаю, вы должны сделать это:

OnClick = "loadingWait ()"

вместо этого:

OnClick = "JavaScript: loadingWait ();"

скажите, если это решило проблему.