I have 2 pages x.php and y.php, I am redirecting the page x.php to y.php. I am redirecting the page by form post method.
y.php is pulling some more data from mysql database and it is taking 3 to 4 seconds to load that page, I need to show progress bar(loading image) while page loads.
this is what, I am doing,
a html page is submitting to remote server x.PHP page and x.PHP page is pulling data from mysql database and based on the type of data it redirects to y.PHP, this redirection is done by automatic form submit using javascript.
I need to show loading image on both html to x.php and x.php to y.php
I tried with echoing image tag on top of x.PHP page, it is working in mozila and not an other browsers.
How can i achieve this, can anyone help me?
I think that the only way to do this is to use AJAX - either on x.php to load y.php, or on y.php to load data.
you need to use jquery. ı am using this code for that.
when your request start its load a loading image to page. when data return with success function it loading the data to page.
$('#something').change(function(){ // change, click doesnt matter
$('#load').html("<img src='images/load2.gif' />"); // loading img
$.post(
'select.php?do=load', // your y.php
{s:value},
function(answer){
$('#load').html("");
$('#page').html(answer);
}
);
});
Hope it helps
<style>
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('images/somegif.GIF') 50% 50% no-repeat rgb(249,249,249);
}
</style>
<script>
$(window).load(function() {
$(".loader").fadeOut("slow");
})
</script>
<body>
<div class="loader"></div>
</body>