show loading Gif animation whenever page gets time too load

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

Does it work if you start it before `$.Ajax` and end it within `success`? Just as a test. — CodingYoshi, Jan 16 '18 at 12:13
This answer here might help you: https://stackoverflow.com/questions/31199304/how-to-use-ajaxstart-to-show-loading-spinner — Liam Kenneth, Jan 16 '18 at 12:14

score 0 · Answer 1 · answered Jan 16 '18 at 12:13

0

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

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

answered Jan 16 '18 at 12:13

İlker Çakır

149
1
10

Shaswata · Answer 2 · 2018-01-16T12:27:06.943

0

You can do it like this

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

Then you can define $loading how ever you want

edited Jan 16 '18 at 12:27

answered Jan 16 '18 at 12:21

Shaswata

1,049
1
9
27

How do you use this, exactly? And what is loading? – Zizzipupp Dec 04 '19 at 11:27

show loading Gif animation whenever page gets time too load

2 Answers2