Question

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

所以我尝试了下面提到的代码 ///下面的代码，用于在DOM尚未就绪时显示GIF。

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

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

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

其中#loading是包含我的GIF代码的div的id。现在这在PC浏览器上有很大的作用，但不适用于Ipad，Iphone和Android手机。我无法弄清楚原因。

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

显示加载GIF BeforeUnload of Page

2 个答案: