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

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