Display AJAX Loader on page load

Question

hello I'm pretty new at javascript and don't know how to use it.

I want AJAX Loader to appear when a page loads and after loading is finished I want loader to dissapear. Can anyone post me a code for that?

The main idea is that you put for example a hidden animated gif to the page. When the ajax request starts you show the image, and when it finishes you hide image again... Try this way... There is many answers already to similar questions.. Look at that one for example.... — PrimosK
– PrimosK, Commented Feb 9, 2012 at 8:59

Frankline · Accepted Answer · 2012-02-09 08:54:39Z

Generally this is done by showing/hiding a div or two over the top of your content. You can get a fancy loading gif from http://www.ajaxload.info/ to get you started. Then you'll want to place a DIV on your page:

<div id="loading"> <p><img src="loading.gif" /> Please Wait</p> </div>

You'll want this hidden by default, so you'd need to add this CSS:

#loading { display:none; }

You'd also want to setup the display for this too:

#loading { display:none; position:fixed; left:0; top:0; width:100%; height:100%; background-image:url("transparentbg.png"); }

The file transparentbg.png would be a 25x25 black PNG set to about 80% opaque. Next you would need a way to show and hide this with jQuery:

function showLoading() { $("#loading").show(); } function hideLoading() { $("#loading").hide(); }

Now you can use this when you need to do something like querying an external page for data:

showLoading(); $.post("data.php", {var:"foo"}, function(results){ $("content").append(results); hideLoading(); });

Timur Gafforov · Accepted Answer · 2017-03-23 08:27:55Z

https://preloaders.net/en/ajax_loader_script here you can find full description along with the loader animations in GIF, SVG and even APNG format

Sapan Diwakar · Accepted Answer · 2012-02-09 08:53:51Z

You can display an image, e.g. this, as soon as you make the Ajax call and then hide the image when you get the response from the ajax call.

mgraph · Accepted Answer · 2012-02-09 08:55:04Z

html:

<div style="display:none" id="dvloader"><img src="loading.gif" /></div>

javascript:

$(function() { $(".changepass").click(function() { $("#dvloader").show(); $(".block1").load("views/changepass.template.php", function(){ $("#dvloader").hide(); }); return false; }); });

Collectives™ on Stack Overflow

Display AJAX Loader on page load

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Related