I am working on a application which will work on puter 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.

I am working on a application which will work on puter 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.

• javascript
• jquery

Share Improve this question Follow asked Feb 11, 2013 at 4:59 anuj pradhananuj pradhan 2,89744 gold badges2929 silver badges3434 bronze badges 3

• There is no onbeforeunload event on iOS.You have to find another way to display your loading. Why not going with ajax? See stackoverflow./questions/6205989/… – Yoann Commented Feb 11, 2013 at 5: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 Commented Feb 11, 2013 at 5: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 : api.jquery./jQuery.ajax – Yoann Commented Feb 11, 2013 at 5:23

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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

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

plete code is here

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

Try unload.

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