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

我在html中显示加载gif和日历，如下所示：

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

页面加载完成后隐藏加载图像

1 个答案: