当页面加载时，是什么触发我的预加载程序gif在页面上显示

What triggers my Preloader gif to show on Page, while Page is loading?

本文关键字：加载 gif 程序 显示 是什么 我的      更新时间：2023-09-26

嗨，当页面加载新内容时，我正在尝试显示.gif。我了解Ajax、javascript、jquery，但我对如何实现这一点感到困惑。

这是带有gif的div。。。

<div id="Loading">
             <div style="display: none;" id="overlay"></div>
                <div id="popup" style="display:none;">
                    <img alt="Loading Rates" src="/Images/loading2.gif" />
                    <div class="dialogtext">Loading available rates, this may take a moment.</div>
                </div>
            </div>
        </div>

以下是我写的一些JavaScript，其中一些有效：

我只是不知道如何触发这一点，希望能提供帮助或参考

所以您想在AJAX请求挂起时显示加载程序gif吗？

您可以使用的最基本的事件处理程序是

// Attach loading icon show/hide to Ajax events
$(document).on({
    ajaxStart: function () {
        $('#MyLoadingDiv').show();
    },
    ajaxStop: function () {
        $('#MyLoadingDiv').hide();
    }
});

只需更改父div以display: none开始（或者只需篡改显示/隐藏调用以满足您的特定需求）

有许多这样的排列。如果您只想将加载程序附加到一个ajax调用（假设您使用了许多ajax调用，而您只需要一个加载程序），您可以执行以下操作：

var myAjaxRequest = $.ajax({
// Your ajax stuff here
    beforeSend: function () { $('#MyLoadingDiv').show(); }
}
$.when(myAjaxRequest).done(function (){
    $('#MyLoadingDiv').hide();
}

在我的脑海中，我认为您还应该能够将{ $('#MyLoadingDiv').show(); }放在ajax调用之前，并在请求完成时将其隐藏起来。

如果有多个请求，您可能需要对上面的代码进行一些修改，以达到以下效果：

var myAjaxRequests = []
myAjaxRequests.push($.ajax({
// Your ajax stuff here
    beforeSend: function () { $('#MyLoadingDiv').show(); }
});
$.when.apply($, myAjaxRequests).done(function (){
    $('#MyLoadingDiv').hide();
}

apply()的目的只是将数组拆分为单独的参数。如果您只使用几个Ajax请求，您可能不需要数组，您可以将它们全部传入，但对于较大的数量，这很好。

我刚刚在浏览器中删掉了这段代码，所以可能会有一些小错误，但它与我用来完成的（我认为）正是你想要的功能类似。

相关文章：