jquery - 使用 jQuerys .change() 时如何显示和隐藏正在加载的 .gif 图像

Question

使用下面的代码时，如何显示和隐藏 loding.gif 图像？这就是所有的代码。没有beforeSend:或success:在这里。

$("#seg").change(function(){
$("#sSeg").load("/blah/blah.php?option="+$("#seg").val());
});

这里发生的是，当下拉值更改时，它将为另一个下拉列表获取新内容。我想在那里添加一个 loading.gif，以便用户知道一切正常。

Answer 1

您可以在使用前显示加载load，然后将其隐藏在load's回调函数中

$("#seg").change(function() {
    $('img.loading').show();
    $("#sSeg").load("/blah/blah.php?option="+$("#seg").val(), function() {
        $('img.loading').hide();
    });
});

Answer 2

使用上面的示例，最简单的方法是显示 loading.gif 并将其替换为 load 函数的下拉列表...

$("#seg").change(function(){
    $("#sSeg").html("<img src=\"loading.gif\" />");
    $("#sSeg").load("/blah/blah.php?option="+$("#seg").val());
});

Answer 3

你的.change()函数是你的beforeSend:，并且 .load 有一个回调函数，它在完成时被调用。这应该工作：

$("#seg").change(function(){
    $('#gif').show();
    $("#sSeg").load("/blah/blah.php?option="+$("#seg").val(), function() {
        $('#gif').hide();
    });
});

请参阅.load() 文档。

Answer 4

只需创建一个像这样的 div，您要在其中显示加载图像并将加载图像放入其中，并将其默认设置为无显示并使用 jQuery 显示。

<div id="loading"><img src="loading.gif"></div>

$("#seg").change(function(){
    $("#loading").css("display","block");
    $("#sSeg").load("/blah/blah.php?option="+$("#seg").val(),function(){
       $("#loading").css("display","none");
    });
});