bigLoader.gif need to show until full page load

Following code show bigLoader.gif loader image show only few second but I need to show it until I get response from pagination_data.php. How can I do it?

<script type="text/javascript">
	$(document).ready(function(){
	//Display Loading Image
	function Display_Load()
	{
	    $("#loading").fadeIn(900,0);
		$("#loading").html("<img src='bigLoader.gif' />");
	}
	//Hide Loading Image
	function Hide_Load()
	{
		$("#loading").fadeOut('slow');
	};
   //Default Starting Page Results
	$("#pagination li:first").css({'color' : '#FF0084'}).css({'border' : 'none'});
	Display_Load();
	$("#content").load("pagination_data.php?page=1", Hide_Load());
	//Pagination Click
	$("#pagination li").click(function(){
		Display_Load();
		//CSS Styles
		$("#pagination li")
		.css({'border' : 'solid #dddddd 1px'})
		.css({'color' : '#0063DC'});
		$(this)
		.css({'color' : '#FF0084'})
		.css({'border' : 'none'});
		//Loading Data
		var pageNum = this.id;
		$("#content").load("pagination_data.php?page=" + pageNum, Hide_Load());
	});
});
</script>

Solution:

You just need to call Hide_Load() after get response from pagination_data.php. To do so use following code
$(“#content”).load(“pagination_data.php?page=” + pageNum, function(data)
{
Hide_Load();
});

Full Code

<script type="text/javascript">
 $(document).ready(function(){
 //Display Loading Image
 function Display_Load()
	{
	    $("#loading").fadeIn(900,0);
		$("#loading").html("<img src='bigLoader.gif' />");
	}
  //Default Starting Page Results
  $("#pagination li:first").css({'color' : '#FF0084'}).css({'border' : 'none'});
  Display_Load();	
  //Hide Loading Image
  function Hide_Load()
  {
	$("#loading").fadeOut('slow');
  };
  $("#content").load("pagination_data.php?page=1",function(data) 
  {       
  Hide_Load();
  });
  //Pagination Click
  $("#pagination li").click(function(){		
	Display_Load();	
	//CSS Styles
	$("#pagination li")
	.css({'border' : 'solid #dddddd 1px'})
	.css({'color' : '#0063DC'});
	$(this)
	.css({'color' : '#FF0084'})
	.css({'border' : 'none'});
	//Loading Data
	var pageNum = this.id;
	$("#content").load("pagination_data.php?page=" + pageNum, function(data) 
	{
	Hide_Load();
	});
  });		
});
</script>

(2283)

About Zahidul Hossein Ripon

Zahidul Hossein Ripon a Bangladesh national, born in 1983 did Bachelor of Science in Computer Science and Engineering. At present, Mr. Ripon is working as a Managing Director in Coraltech Solutions. Before working with Coraltech Solutions, he worked in different reputed ICT industries in Bangladesh from year 2007. Mr. Ripon is one of the Associate Member of Bangladesh Computer Society. Mr. Ripon attended couple of Conference and Training, Seminars and events of ICT in Bangladesh and abroad. He is one of the co-author of few number of research publications in international scientific journals and proceedings.

, ,

One Response to bigLoader.gif need to show until full page load

  1. DigitalMonk April 1, 2013 at 6:36 am #

    It’s a tremendous article, very much helpful. Once I fall in such issue and spent many hours (couple of days) but my bad luck that didn’t find any solution over net.

    Really really awesome. :)

    Many many thanks for this tutorial.

    – DigitalMonk

Leave a Reply


*