隱藏加載圖像一旦頁面加載完成

Question

我有2個PHP頁面。用戶提交表單（form.php），結果在下一頁（results.php）中查看。在顯示結果時可能會延遲幾秒鐘 - 我在上面添加了標準旋轉加載程序gif，其中顯示了結果（它顯示了2個可用日期的迷你日曆）。我想在日曆加載完成後隱藏它。

下面是獲取日曆腳本：

$(document).ready(function() { 
$(document).on('click', '#calendar_1 .next, #calendar_2 .next', function(event){ 
    event.preventDefault(); 
    var href_link = $("#calendar_1 .next").attr("href"); 
    $("#cals").load(href_link); 
}); 

$(document).on('click', '#calendar_1 .prev, #calendar_2 .prev', function(event){ 
    event.preventDefault(); 
    var href_link = $("#calendar_1 .prev").attr("href"); 
    $("#cals").load(href_link); 
}); 

    $("#cals").load("loadCalendar.php"); 
}); 

我展示如下加載GIF和日曆在html：

<img id="loading_spinner" src="loading_spinner.gif"> 

<div id="cals"></div> 

我猜我需要做的是這樣的：

$('#loading_spinner').hide(); 

隱藏gif圖像，但我只想在日曆實際加載後執行此操作。我無法制定出正確的背景或如何做到這一點，即使可能。

Answer 1

您可以將回調添加到您的load()函數並從此處隱藏微調器。這隻會在load()完成執行時隱藏它。

$(document).on('click', '#calendar_1 .prev, #calendar_2 .prev', function(event){ 
    event.preventDefault(); 
    var href_link = $("#calendar_1 .prev").attr("href"); 

    $("#cals").load(href_link, function() { 
     $('#loading_spinner').hide(); 
    }); 
});