每当页面加载时间过长时，显示加载的Gif动画

Question

How can I show a loading Gif animation by using a jquery in asp.net project in Main.Master page? Whenever its taking time, I would like to show this Gif.

I searched on internet but they are showing this loading images for one control only. Thats why i need to keep this jquery at one place (ie: in master page) and want too use it on all content page whenever its taking too much time to load the page (either first time the page loads or button clicked or any event taking time)

$.ajax({
            type: "POST",
            url: "~/Jobs/ExportJobEntry.aspx",
            data: dataString,
            beforeSend: loadStart,
            complete: loadStop,
            success: function() {
                $('#form').html("<div id='msg'></div>");
                $('#msg').html("Thank you for your email. I will respond within 24 hours. Please reload the page to send another email.")
            },
            error: function() {
                $('#form').html("<div id='msg'></div>");
                $('#msg').html("Please accept my apologies. I've been unable to send your email. Reload the page to try again.")
            }
            return False);
        });
        $(document).ready(function () {
            $(document).ajaxStart(function () {
                $("#loading").show();
            }).ajaxStop(function () {
                $("#loading").hide();
            });
        });

I used this code but it is not working

Answer 1

You can use jQuery BlockUI plugin. Here is official website, please read documentation

http://malsup.com/jquery/block/

Answer 2

You can do it like this

$(document)
  .ajaxStart(function () {
    $loading.show();
  })
  .ajaxStop(function () {
    $loading.hide();
  });

Then you can define $loading how ever you want