在页面卸载之前显示加载 GIF

Question

我正在开发一个可以在计算机以及 Ipad、Iphone、平板电脑和 Android 手机上运行的应用程序。当用户从一个页面移动到另一个页面时，我有一个显示 loading... gif 的要求，因为这将为用户提供页面加载/卸载正在进行中的信息。

所以我尝试了下面提到的代码 ///下面的代码用于在 DOM 未准备好时显示 GIF。

$(document).ready(function(){
  $("#loading").hide();});

//下面的代码用于在用户单击某个按钮进行某些服务器交互时显示 GIF。

$(window).bind('beforeunload',function(){ 
      $("#loading").show();});

#loading 是包含我的 GIF 代码的 div 的 id。 现在这在 PC 浏览器上非常有效，但在 Ipad、Iphone 和安卓手机上却没有。我不知道为什么。

<div id="loading">
  <img id="loading-image" src="/img/loading.gif" alt="Loading..." /></div>

此 div 用于加载 GIF。

Answer 1

我使用“window.onbeforeunload”事件和 jquery-loading-overlay

链接： https://gasparesganga.com/labs/jquery-loading-overlay/

完整代码在这里

<!-- also link to jquery.js -->
<script src="https://cdn.jsdelivr.net/npm/gasparesganga-jquery-loading-overlay@2.1.6/dist/loadingoverlay.min.js"></script>

<script>
    window.onbeforeunload = function () {
        // Show Loding
        $.LoadingOverlay("show");

        // Disable javascript default confirm message
        //return "Are you sure you wish to leave the page?";
        return undefined;
    };

    // If Canceled by user
    $(document).keyup(function (e) {
        if (e.key === "Escape") {
            $.LoadingOverlay("hide");
        }
    });
</script>

Answer 2

试试unload。

$(window).unload(function()
{
    $('body').html('<img src="img/4.gif" alt="" />');
});