[RESOLVED]Add Jquery Loading Message to a page

I have this function in the server side that calls the function drawItems from javascript on pageload event.

 ClientScript.RegisterStartupScript(GetType(), "id", "setTimeout(drawItems,5000);", true);

How i can show a loading image while the function(drawItems) is retrieve data?

Hi Sanfoor,

First ,you need to define a div to display the image ,like below:

<div class="loader"></div>

Second, you need to set the css style  for your div, the use Jquery fadeout() method to show the image ,like below:

.loader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url('images/page-loader.gif') 50% 50% no-repeat rgb(249,249,249);
}

Then in your  function ,you need to code like below:

$(".loader").fadeOut(2000);

Here is similar working demo for you:

http://www.aspdotnet-suresh.com/2013/09/jquery-show-loading-image-while-page-loads.html

Best Regards,

Kevin Shen.

Sanfoor

How i can show a loading image while the function(drawItems) is retrieve data?

You can use AJAX ModalPopup Extender for that. Check my below blog post on how to implement that

http://ruchirac.blogspot.co.nz/2012/09/use-ajax-modalpopup-to-block-ui-while.html

Leave a Reply