Display a loading gif in a div until div loads content from other page

Question

I am loading a page mypage.php and in div1 I include example.php from the same server.

The script is :

    <script>
$(document).ready(function(){

    $("#div1").load("example.php");
  });

</script>  

How can I add a loading.gif in while example.php is loading the content? I want to show the loading.gif only until the content loads.

Answer 1

you have to set a img tag display: none like:

html:

<div id="img-load">
<img src="loading.gif" />
</div>

script:

loader = function(){
    $('#img-load').show();
    $( "#result" ).load( "example.php", function() {
      $('#img-load').hide();
    });
}
loader();

Answer 2

try using like this:

$(document).ready(function(){
    $('#imageId').show();// imageId is id to your gif image div
    $('#div1').on('load','example.php',function(){
    $('#imageId').hide();// hide the image when example.php is loaded
  }
});

Answer 3

This method worked for me:

HTML

<div id="load"><img src="loading_animation.gif" /></div>
<div id="content">Display content once loaded</div>

Javascript

<script type="text/javascript">
$(document).ready(function() {

   $('#load').show(); // Show loading animation
   $('#content').hide(); // Hide content until loaded

$(window).load(function() {

$.ajax({
  post: "GET",
  url: "your_file.php" // File that you're loading

}).done(function() {

  alert("Finished!"); // Alert message on success for debugging
  $('#load').hide(); // Hide loading animation
  $('#content').show(); // Show content

}).fail(function() {

  alert("Error!"); // Alert message if error for debugging

    });
  });
});
</script>