如何在等待下載時間的JavaScript中設置加載符號？

Question

我有兩個jsp頁面：One.jsp和Second.jsp

當我執行下載操作時，它直接指向jsp頁面，並且沒有事件。 在等待下載時，我要設置一個圖像。 我是通過ID完成的，但是下載完成后，加載圖像不會消失。 下載完成后如何隱藏？

這是我的代碼：

document.getElementById("loading").style.visibility = "visible";

document.first.action="Second.jsp";
document.first.submit();

Answer 1

在頁面上使用ajax請求。

顯示加載程序的代碼

<div class="loading-indicator">
    <img src='~/Images/loading2.gif' />
</div>
 $(document).ajaxSend(function (event, request, settings) {
        $('.loading-indicator').show();
    });

    $(document).ajaxComplete(function (event, request, settings) {
        $('.loading-indicator').hide();
    });

調用另一個jsp頁面的代碼

function ClickMe_Click(){
$.ajax({
    type: "post",
    url: "dimensionList.jsp",
    data: {"dimensionName":"Slappy"},
    success: function(msg) {
        alert(msg.data);
    },
    error:function (xhr, ajaxOptions, thrownError){
        alert(xhr.status);
        alert(thrownError);
    }  
});
return false;}

Answer 2

通過使用ajax，您可以做到這一點

$(document).ready(function () {
    $(document).ajaxSend(function (event, request, settings) {
        $('.loading-indicator').show();
    });

    $(document).ajaxComplete(function (event, request, settings) {
        $('.loading-indicator').hide();
    });
});

顯示加載程序的代碼

<div class="loading-indicator">
    <img src='~/Images/loading2.gif' />
</div>

每當進行了ajax調用時，加載程序都會自動加載；而當ajax調用完成時，加載程序將隱藏