Show "Loading..." while browsing between pages

Question

When I make a call ajax I can already show/hide a loading gif like this:

$(document).ajaxStart(function () {
   $('#loadingFull').fadeIn();
}).ajaxStop(function () {
   $('#loadingFull').fadeOut();
});

However, several calls in the system are made like this, including in the menu:

@Html.ActionLink("Importar", "Import", "DeliveryService")

or during a button submit.

How to show GIF during this request, you can capture this type via javascript?

Answer 1

Your Html.ActionLink() will generate a html similar to this:

<a href="/DeliveryService/Import">Importar</a>

Once done, just intercept the requests and display the GIF.

Below is a simple example of how to do this:

$('a').click(function(){
    $('#loadingFull').fadeIn(); 
});

Note that as the page will be updated, you do not need $('#loadingFull').fadeOut();.

See a simple example below:

$('a').click(function() {
  $('#loadingFull').fadeIn();
});

div#loadingFull {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  overflow: visible;
  background: #333 url('http://files.mimoymima.com/images/loading.gif') no-repeat center center;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loadingFull"></div>


<a href="#">Importar</a>

To the submit() you can do something similar, but instead .click(), you can use the .Submit().

Apparently you are using Asp.NET MVC. With this, you can add the code to your file _Layout.cshtml that the same will serve for all pages.

The example of the Loader I removed from here.

Answer 2

In my case, I use blockUI as follows:

$(document).ready(function () {

        //blockUI default
        $.blockUI.defaults.message = '<img src="@Url.Content("~/Content/img/ajax_loader.gif")" />';
        $.blockUI.defaults.css.border = 'none';
        $.blockUI.defaults.css.backgroundColor = '#fff';
        $.blockUI.defaults.css.opacity = 0.6;
        $.blockUI.defaults.overlayCSS.backgroundColor = '#fff';
        $.blockUI.defaults.overlayCSS.opacity = 0.6;

    });