Show a loading GIF BeforeUnload Of a Page

Question

I am working on a application which will work on computer as well as Ipad,Iphone,Tablets and Android phones. I have one requirement of Showing a loading... gif when user moves from one page to other because this will give user a info that page loading/unloading is in process.

So i Tried below mentioned code ///below code for showing GIF while DOM is not ready.

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

//below code for showing GIF when user clicks on some button to do some Server Interaction.

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

where #loading is id of a div which contains my GIF Code. Now this is working greatly on PC browsers but NOT on Ipad,Iphone and android phones. I am Not able to figure out why.

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

This div is for loading the GIF.

Answer 1

I using "window.onbeforeunload" event and jquery-loading-overlay

link: https://gasparesganga.com/labs/jquery-loading-overlay/

complete code is here

<!-- also link to jquery.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>