I have a php page that requires another php page, the page seems to take very long to load so I decided to have a loading image, problem is the image appears almost when the whole page loads instead of appearing when the page stsrts loading, how can I solve this?
my code is as follows:
<?php
echo '<div id="mm">mm</div>';
require_once( 'includes/xxxxxxxxxxxx.php' ); ?>
<html>
<head>
<title>myiframe</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">
</script>
<scriptsrc="http://cdnjs.cloudflare.com/ajax/l
ibs/modernizr/2.8.2/modernizr.js"></script>
<script tyep="text/javascript">
$(window).load(function() {
// Animate loader off screen
$("#mm").fadeOut("slow");
});
</script>
<head>
<body>
</body>
</html>
PHP runs before the DOM is visible (as the DOM is in the client-side, and PHP is in the server side. When you see the page, PHP is done), so when the requiring taking place you are not seeing anything (server is still running the PHP - DOM is not visible).
You'll have to modify the architecture. For example, first load the page without xxxxxxxxxxxx.php and later get xxxxxxxxxxxx.php content with an AJAX call - when firing the AJAX to get the page, display the loading image.
Move the div from the top of the page to inside the body, and then move the script with the fade out command after the div
The best way to do it would be using an ajax call.
First you load your loading page, then using javascript you make the call for the second page and update the first page with the results.
you can find how to do it here: Changing web page content using Ajax