Display gif loading in div until div loads content from another page

Question

I load the page mypage.php and in div1 include example.php from the same server.

script:

<script> $(document).ready(function(){ $("#div1").load("example.php"); }); </script> 

How can I add load.gif while example.php is loading the content? I want to show load.gif only before loading the content.

Answer 1

you need to set img: 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>