Hi i am trying to use script to display a loading bar while my php is executing. I learnt from this website but when I did the exactly same thing, my loading bar still cannot display, any idea why?
<html>
<head>
<style type="text/css">
div#content {
display: none;
}
div#loading {
top: 200 px;
margin: auto;
position: absolute;
z-index: 1000;
width: 160px;
height: 24px;
background: url(img/142.gif) no-repeat;
cursor: wait;
}
</style>
<script type="text/javascript">
function preloader(){
document.getElementById("loading").style.display = "none";
document.getElementById("content").style.display = "block";
}//preloader
window.onload = preloader;
</script>
<style type="text/css"></style>
</head>
<body>
<div id="loading"></div>
<div id="content" >
<?php
sleep(10);
echo 'This content has been loaded via an AJAX request';
?>
<br>
</div>
</body>
</html>
Hi i am trying to use script to display a loading bar while my php is executing. I learnt from this website but when I did the exactly same thing, my loading bar still cannot display, any idea why?
<html>
<head>
<style type="text/css">
div#content {
display: none;
}
div#loading {
top: 200 px;
margin: auto;
position: absolute;
z-index: 1000;
width: 160px;
height: 24px;
background: url(img/142.gif) no-repeat;
cursor: wait;
}
</style>
<script type="text/javascript">
function preloader(){
document.getElementById("loading").style.display = "none";
document.getElementById("content").style.display = "block";
}//preloader
window.onload = preloader;
</script>
<style type="text/css"></style>
</head>
<body>
<div id="loading"></div>
<div id="content" >
<?php
sleep(10);
echo 'This content has been loaded via an AJAX request';
?>
<br>
</div>
</body>
</html>
- style="display: none;"> – Lal krishnan S L Commented Jan 22, 2014 at 12:23
- what do you mean? @Kannan – user2462090 Commented Jan 22, 2014 at 12:29
- Your id loading is display:none – Lal krishnan S L Commented Jan 22, 2014 at 12:31
- I delete that, still not working.<div id="loading"></div> @Kannan – user2462090 Commented Jan 22, 2014 at 12:33
-
echo 'This content has been loaded via an AJAX request';– you’re lying, it isn’t … and most likely therefor this does not work as intended, because stuff like output buffering etc. will e in the way – the browser waits until he has received the plete resource before displaying anything. If you want a loading animation for an AJAX request, then make an actual AJAX request to test it. – C3roe Commented Jan 22, 2014 at 13:26
2 Answers
Reset to default 5Just run this code in any browser
<!DOCTYPE html>
<?php
@ini_set('zlib.output_pression', 0);
@ini_set('implicit_flush', 1);
@ob_end_clean();
set_time_limit(0);
?>
<html>
<head>
<style type="text/css">
div#content {
display: none;
}
img#loading {
top: 200 px;
margin: auto;
position: absolute;
z-index: 1000;
width: 500px;
height: 24px;
cursor: wait;
height: 500px
}
</style>
<style type="text/css"></style>
</head>
<body>
<?php
for ($i = 0; $i < 10; $i++) {
echo str_repeat(' ', 1024 * 64); // this is for the buffer achieve the minimum size in order to flush data
if ($i == 1)
echo '<img id="loading" src="img/142.gif" />';
}
?>
<div id="content" style="display: block;">
<?php
sleep(5);
echo 'This content has been loaded via an AJAX request';
?>
<br>
</div>
<script type="text/javascript">
function preloader() {
document.getElementById("loading").style.display = "none";
document.getElementById("content").style.display = "block";
}//preloader
window.onload = preloader;
</script>
</body>
</html>
if you have acces to php.ini set following configuration in your php.ini and remove @ini_set('zlib.output_pression', 0); @ini_set('implicit_flush', 1); from begining
output_buffering = Off
implicit_flush = on
output_pression = Off
If your are curious about output buffering click here
<?php
sleep(1000);//increase sleep time
echo 'This content has been loaded via an AJAX request';
?>
and remove style="display: none;"