Javascript 单击提交按钮后是否显示加载gif？

我试图在用户单击表单上的提交后显示正在加载的gif

我一直在寻找一个很好的教程来展示它是如何完成的

---

我已经完成了一半，但是gif保存的时间不够长，是否有人知道一个好的教程或脚本需要完成这项工作。

您可以在提交后使用setTimeout重新加载gif（myImg.src=myImg.src；）

function wait_animation()
{
    var myMsg = "Sending form data to server... Please Wait...";
    window.status = myMsg;
    msg("<img name='wait' src='/all/images/wait.gif' height=7 width=78> " + myMsg);
}

function long_wait_animation()
{
    var myMsg = "Still sending... You are uploading large files and we have not yet received " +
                            "all the information. Unfortunately, Internet Explorer sometimes interprets " +
                            "this delay as a server error. If you receive a 'Timeout' or 'Site not found' " +
                            "error please click your 'Back' button and try sending less files.";
    window.status = "Still sending ...";
    msg("<img name='wait' src='/all/images/wait.gif' height=7 width=78> " + myMsg);
}

// Generic onSubmit handler
function form_on_submit( myForm )
{
    form_check_lists( myForm );
    if (form_errors.length != 0) {
        err(    'There are some problems with the information you entered:' +
                    '<ul><li>' + form_errors.join('<li>') );
        form_enable_submit(myForm); // re-enable submit (so user can retry)
    } else {
        hideLayer('err');
        window.status = "Uploading Data... Please Wait...";
        form_disable_submit(myForm); // function that prevents double-submissions
        window.setTimeout("wait_animation()", 10);              // 1/100th 
sec (must happen after submit)
        window.setTimeout("long_wait_animation()", 60*1000); // 60 secs
        myForm.submit();
    }
    // reset form errors
    form_errors = new Array();
    return false;   // false=don't submit (because we probably just submitted it).
}

函数wait_animation（）
{
var myMsg=“正在将表单数据发送到服务器…请稍候…”；
window.status=myMsg；
味精（“+myMsg”）；
}
函数long_wait_animation（）
{
var myMsg=“仍在发送…您正在上载大文件，但我们尚未收到”+
“所有信息。不幸的是，Internet Explorer有时会解释”+
“此延迟为服务器错误。如果您收到‘超时’或‘未找到站点’”+
“错误请单击“上一步”按钮并尝试发送较少的文件。”；
window.status=“仍在发送…”；
味精（“+myMsg”）；
}
//泛型onSubmit处理程序
提交功能表（myForm）
{
表格检查清单（myForm）；
if（form_errors.length！=0）{
错误（'您输入的信息有一些问题：'+
“
”+形式错误。连接（“
”）；
表单启用提交（myForm）；//重新启用提交（以便用户可以重试）
}否则{
hideLayer（'err'）；
window.status=“正在上载数据…请稍候…”；
form_disable_submit（myForm）；//防止重复提交的函数
setTimeout（“wait_animation（）”，10）；//第1/100次
sec（必须在提交后进行）
setTimeout（“long_wait_animation（）”，60*1000）；//60秒
myForm.submit（）；
}
//重置表单错误
form_errors=新数组（）；
return false；//false=不提交（因为我们可能刚刚提交了它）。
}

---

除了msg（）使用innerHTML添加动画gif而不是更改现有gif的源之外，上面的代码所做的基本相同。不过，概念是一样的，您需要在提交后加载gif，并且只能使用setTimeout（因为否则IE会阻止新脚本）。

这非常简单。您有一个图像，最初是隐藏的：

<img src="myloadingimage.gif" style="display: none;" id="loading_image">

这不是火箭科学，我保证。：）

编辑：为了回应您的评论，这将使用jQuery。您放置了jQuery标记，因此我认为这很好

我还注意到，我没有完全回答您最初的问题，即您希望显示加载条，大概是一个常规表单。如果您的表单标签id为“myform”，则应执行以下操作：

$('#myform').submit(function() {
    $('#loading_image').show(); // show animation
    return true; // allow regular form submission
});

您也可以在中插入这样的行：

$(':submit',this).attr('disabled','disabled');

如果要阻止用户多次单击“提交”。这仍然应该在服务器端进行验证，但这是一个很好的表面防御屏障。

**要设置全局ajax选项，您需要这样做**
**To set globally ajax options you need to do this**

<img src="myloadingimage.gif" style="display: none;" id="loading">

$("#loading").bind("ajaxSend", function(){

   $(this).show();

 }).bind("ajaxComplete", function(){

   $(this).hide();

 });

$（“#加载”）.bind（“ajaxSend”，function（）{
$（this.show（）；
}).bind（“ajaxComplete”，函数（）{
$（this.hide（）；
});

---

页面上的所有Ajax调用都将使用这些默认设置

“GIF保存时间不够长”？问题可能是GIF循环不正确。您可以与大多数支持GIF的图像编辑器进行循环。

您可以发布一些代码吗？这需要jQuery或Prototyoe或其他什么吗？那么表单ID呢，它是否应该引用函数……第一种技术和Subba的相关技术需要通过AJAX提交表单（因此从技术上讲，您不会离开页面）。这可能会扰乱浏览器导航，可能不是您想要的。第二种技术在IE6或更高版本中不起作用，因为IE在提交时会停止所有页面动画和脚本（以前通过setTimeout安排的除外）。我想这就是OP所说的“我走了一半，但gif保存的时间不够长”的意思。我想他说的“hold”是指动画。顺便说一句，这对我来说是个骗局

**To set globally ajax options you need to do this**

<img src="myloadingimage.gif" style="display: none;" id="loading">

$("#loading").bind("ajaxSend", function(){

   $(this).show();

 }).bind("ajaxComplete", function(){

   $(this).hide();

 });