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

Posted 2023-03-14

【中文标题】在页面卸载之前显示加载 GIF

【英文标题】：Show a loading GIF BeforeUnload Of a Page

【发布时间】：2013-02-11 04:59:21

【问题描述】：

我正在开发一个可以在计算机以及 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"  /></div>

此 div 用于加载 GIF。

【问题讨论】：

ios 上没有onbeforeunload 事件。你必须找到另一种显示加载的方式。为什么不使用ajax？见***.com/questions/6205989/…

@YoannM 感谢您的帮助，但是当我们从一个页面移动到另一个页面时，我们如何使用 Ajax？这就是我寻找 jquery/javascript 替代品的原因。

您可以从当前页面获取其他页面的内容。然后用新内容替换当前内容。这只是一个ajax调用。照顾 jQuery $.ajax 函数：api.jquery.com/jQuery.ajax

【参考方案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>

【讨论】：

经过几天的搜索，这对我有用。非常感谢！！

【参考方案2】：

试试unload。

$(window).unload(function()

    $('body').html('<img src="img/4.gif"  />');
);

【讨论】：

它是因为浏览器发送其他 http 请求并清除旧数据，因此在加载新页面之前和卸载旧页面之后没有代码可以运行...