Маленькая (или большая) проблема еще раз
Я использую простую форму html, при вызове action вызывает скрипт php (mail). Теперь этот скрипт занимает немного времени, чтобы закончить, так как есть некоторые временные ограничения там, перед отправкой другой почты. Я ожидал, что он загрузит пустой страницы или, по крайней мере, отображать все перед циклом .. но это не так, вместо этого он вроде «зависает» в форме застревает (хотя вы можете видеть, что URL-адрес скрипта загружается в строке браузера), и как только скрипт закончил загрузку всего вывода на странице .. поэтому я начал смотреть на некоторые способы создания этого загружаемого изображения .. или, по крайней мере, пусть пользователь знает, что что-то происходит, и что скрипт работает.
Я видел некоторые вещи в потоке стека и включал это, в котором должно было отображаться изображение загрузки, где находится кнопка отправки, но я не думаю, что это работает, потому что она больше не загружает страницу с формой … но работает php loop, хотя я собираюсь позволить вам увидеть его в любом случае в надежде .. что-то:
$('#loading_image').show(); // show loading image, as request is about to start $.ajax({ url: '..', type: '..', complete: function() { // request is complete, regardless of error or success, so hide image $('#loading_image').hide(); } }); $('#myform').submit(function() { $('#loading_image').show(); // show animation return true; // allow regular form submission }); и моя форма
<form method="post" action="sendeveryone.php" id="myform" onReset="return confirm('Do you really want to reset the form?')"> <fieldset> Please note: All e-mails start with "Dear {MEMBER_NAME}, " If you would like to mention their username in the body of your email, all you have to do is type '{MEMBER_NAME}' and it will replace it to their username.<br><br> <br> <label class="control-label" for="subject">Subject</label> <input id="subject" name="subject" class="span5" type="text"> <label class="control-label" for="body">Body</label> <div class="row-fluid"> <div class="utopia-widget-content-nopadding"> <div class="span12 text-editor"> <textarea id="input" name="input"></textarea> </div> </div> </div> <br><img src="myloadingimage.gif" style="display: none;" id="loading_image"> <button class="btn btn-large btn-primary span5" type="submit">Send</button> <button class="btn btn-large span5" type="reset">Cancel</button> </fieldset> </form>
Вы можете использовать .ajaxStart() и .ajaxStop() с помощью jQuery
$('.log').ajaxStart(function() { $(this).text('Triggered ajaxStart handler.'); });