在加载php脚本时显示加载图像 [英] Showing a loading image while loading php script

问题描述

小（或大）问题再次

我使用的是一个简单的html表单，在提交操作上调用一个php（邮件）脚本..现在这个脚本需要有一段时间要完成，因为在发送另一封邮件之前有一些时间限制..我希望它加载一个空白页面，或者至少在循环之前显示所有内容..但它没有，相反它有点挂起在表单卡住（虽然你可以看到脚本的URL在浏览器栏中加载），一旦脚本完成，它会加载页面上的所有输出..所以我开始研究如何使这个加载image ..或至少让用户知道正在发生的事情，并且脚本正在运行。

I am using a simple html form, on submit action calls a php (mail) script.. now this script takes a little while to finish as there are some time limits in there before sending another mail.. I expected it to load a blank page, or at least display everything before loop.. but it didn't, instead it sort of "hangs" at the form stuck (although you can see the url of the script is loading in the browser bar) and once the script is finished it loads all the output on the page.. so I started looking at some ways of how to make this loading image.. or atleast let the user know something is happening, and that the script is working.

我在stackover流程中看到了一些东西并包含了这个，这应该是显示提交按钮所在的加载图像，但我认为它不起作用，因为它不再加载带有表单的页面..但运行php循环，虽然我打算让你看到它仍然希望..某事：

I saw some stuff on stackover flow and included this, which was supposed to show a loading image where the submit button is, but I don't think it works because it isn't loading the page with the form anymore.. but the running the php loop, although I am going to let you see it anyway in the hope of.. something:

$('#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的方法

You can use the .ajaxStart() and .ajaxStop() methods with jQuery

$('.log').ajaxStart(function() {
    $(this).text('Triggered ajaxStart handler.');
});

这篇关于在加载php脚本时显示加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！