Question

我有这个代码，我用它来POST而不重新加载页面，但我想知道如何在正在执行的脚本中添加它来显示图像。示例loader.gif

感谢您的帮助。

<script language="javascript" src="jquery-1.6.4.min.js"></script>
<script language="javascript">
$(document).ready(function() {
    $().ajaxStart(function() {
        $('#loading').show();
        $('#result').hide();
    }).ajaxStop(function() {
        $('#loading').hide();
        $('#result').fadeIn('slow');
    });
    $('#form, #fat, #form').submit(function() {
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: $(this).serialize(),
            success: function(data) {
                $('#result').html(data);

            }
        })

        return false;
    }); 
})

Answer 1

使用JQuery将图像添加到页面。通常，这是由用户单击以启动AJAX请求的按钮附近添加的。这允许用户在脚本运行时看到后台发生了某些事情。

或者，由于您的脚本是在document.ready上运行的，因此您可以从get-go获取图像，然后在ajax调用完成后将其删除。

Answer 2

不确定我是否理解，但似乎你很接近它

// #loading could be an img tag pointing to loader.gif or a div containing the img
$('#loading').ajaxStart(function() {
    $(this).show();
    $('#result').hide();
}).ajaxStop(function() {
    $(this).hide();
    $('#result').fadeIn('slow');
});

Answer 3

将加载器放入隐藏的div（显示：无），然后可以使用

$('#div').show();

在ajax请求之前

然后在成功回调中再次隐藏它：

$('#div').hide();

Answer 4

在submit函数的第一行：

$('#loadingImg').show();

并在回调success函数的第一行：

$('#loadingImg').hide();

运行POST时显示图像

4 个答案: