Скрыть загрузку изображения после завершения загрузки

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(); 
    }); 
});