Question

这是一个包含GIF动画的div：

<div id="busy">
    <br />
    Loading... Please Wait...
    <br />
    <img src="Resources/Scripts/loader.gif" alt="" />
</div>

这是一个包含AJAX POST方法的函数：

    function Handler(datas, ele) {
        $('#busy').show();
        $.ajax({
            url: "FileUploadHandler.ashx",
            type: "POST",
            data: datas,
            contentType: false,
            processData: false,
            success: function () {
                    ele.width = 100;
                    $('#busy').hide();
            }
        });
    }

你可以看到我在目标div上使用了show和hide。但它根本不起作用，我不知道问题出在哪里？

Answer 1

您需要设置beforeSend方法才能显示加载进度并完全隐藏它。只有在这种情况下，才能保证成功/失败动画将被隐藏。

 function Handler(datas, ele) {
        $.ajax({
            url: "FileUploadHandler.ashx",
            type: "POST",
            data: datas,
            contentType: false,
            processData: false,
            beforeSend  : function() {
                  $("#busy").show();
            },
            success: function () {
               ele.width = 100;

            },
            complete: function() {
                $("#busy").hide();
            }

        });
    }

＆＃13;

function showHide(){
  if($('#busy').css("display") == "none"){
      $('#busy').show();
  } else {
    
       $('#busy').hide();
  }
  
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="busy">
<img src="https://rec.redsara.es/registro/img/loading.gif"/>
</div>



<input type="button" value="click" onclick="showHide()" />

＆＃13;

使用ajax发布时显示加载图像不起作用

1 个答案: