javascript - Loader div 不出现

Question

我有下面的代码，但我的带有 loader gif 的 div 没有出现。我尝试了很多方法来做到这一点，而且我可以。为什么$('.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，因为我不知道如何下载响应，当我寻找该主题时，我读到使用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 fiddle 中看到它:https://jsfiddle.net/jr5uye4o/2/

这里有更多关于如何使用 XMLHttpRequest 的阅读内容:https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest