Question

我有下面的代码，我的div与loader gif没有出现。我试过很多方法来做到这一点，我可以。为什么$('.loader').show();不起作用？

$('.loader').show();
var url = "myURL.ashx?p1=" + p1;
if (GetRequestReturnStatus(url)) {
    window.open(url);
}
$('.loader').hide();

function GetRequestReturnStatus(url) {
    var http = new XMLHttpRequest();
    http.open('HEAD', url, false);
    http.send();   

    if (http.status == 404 || http.status == 403 || http.status == 500) {
        ShowMessage("nFailure", "some message");
        return false;
    }
    return true;
}

HTML：

<div class="loader" style="display: none;">
    <asp:Image ID="Loader" CssClass="p12" ImageUrl="~/_img/loader.gif" runat="server" ViewStateMode="Enabled" />
</div>

它正在代码中的另一个函数中工作。只是在那种情况下不起作用。我没有使用ajax，因为我不知道如何下载de响应，当我在寻找那个主题时，我读到的最好是使用window.open而不是ajax来下载文件。

Answer 1

它正在运行，但是你会立即用$('.loader').hide();

再次隐藏它

$('.loader').show();
var url = "myURL.ashx?p1=" + p1;
if (GetRequestReturnStatus(url)) {
    window.open(url);
}
//$('.loader').hide();  //this line was hiding your .loader element(s)

function GetRequestReturnStatus(url) {
    var http = new XMLHttpRequest();

    http.onreadystatechange = function() {
        //todo logic here once the request has changed state
        if(http.readyState == 4) { //done loading
            hideLoader();
        }
    };
    http.open('HEAD', url, false);
    http.send();   

    if (http.status == 404 || http.status == 403 || http.status == 500) {
        ShowMessage("nFailure", "some message");
        return false;
    }
    return true;
}

function hideLoader() {
    $('.loader').hide();
}

你可以在这个JS小提琴中看到它：https://jsfiddle.net/jr5uye4o/2/

有关如何在此处使用XMLHttpRequest的更多内容：https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

Answer 2

由于您已经在使用jQuery，为什么不将$.ajax用于请求？

$.ajax({
  method: "GET",
  url: "/yourRequestUrl",
  data: { p1: yourParam, p2: otherParam }
}).done(function(msg) {
    $('.loader').hide(); // Processed once the request is complete.
  })
  .fail(function() {
    alert("Something went wrong with the request");
  });

Loader div不会出现

2 个答案: