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.

There is no `onbeforeunload` event on iOS.You have to find another way to display your loading. Why not going with ajax? See http://stackoverflow.com/questions/6205989/is-there-an-alternative-method-to-use-onbeforeunload-in-mobile-safari — Yoann, Feb 11 '13 at 05:12
@YoannM I appreciate your help but While we are moving from one page to other then how can we use Ajax? that is why i am looking for a jquery/javascript alternative. — anuj pradhan, Feb 11 '13 at 05:15
You can get the content of the other page from your current page. And then replace the current content by the new one. It's just an ajax call. Look after jQuery $.ajax function : http://api.jquery.com/jQuery.ajax/ — Yoann, Feb 11 '13 at 05:23

score 3 · Answer 1 · answered Nov 30 '19 at 23:06

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/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>

This worked for me after days of searching. Thank you so much!! — luv2code, Dec 24 '19 at 07:42

score 0 · Answer 2 · answered Feb 11 '13 at 05:31

0

Try unload.

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

answered Feb 11 '13 at 05:31

Dipesh Parmar

27,090
8
61
90

1

its because browser sending other http request and clear old data so there is no code to run before loading new page and after unloading old page... – Dipesh Parmar Feb 11 '13 at 06:11

Show a loading GIF BeforeUnload Of a Page

2 Answers2

Linked