Question

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

我无休止地搜索一个很好的教程，展示它是如何完成的。

我到了中途，但是gif没有足够长的时间，任何人都知道一个好的教程，或者脚本需要完成这个。

Answer 1

这很简单。你有一张最初隐藏的图片：

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

您发出了一个AJAX请求：

$('#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();
    }
});

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

编辑：在回复您的评论时，这会使用jQuery。你把jQuery标签放在一起，所以我认为没问题。

我还注意到我没有完全解决你的原始问题，也就是说你想要显示加载栏的大概是普通表格。如果您的表单标记的ID为“myform”，则应执行此操作：

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

您还可以在以下位置抛出一行：

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

如果您想阻止用户多次点击提交。这仍然应该在服务器端验证，但它是一个很好的表面屏障。

Answer 2

你使用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).
}

上面的代码基本上做了同样的事情，除了msg（）使用innerHTML来添加动画gif而不是改变现有gif的源代码。这个概念是一样的，你需要在提交后加载gif，你只能使用setTimeout来做（因为IE会阻止新的脚本）。

Answer 3

**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();

 });

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

Answer 4

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

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

4 个答案: