Question

I need a simple way to show that results are loading.. from database, while the page loads. I am not using jQuery to do this.

What I tried now is: I put a <div> tag with loading text in it and using JavaScript I made the display to none after the whole while loop. But I don’t get to see the text at all.

<div id="loading">Loading Results...</div>

I put the above code just after the body tag.

I put the below code right after the while loop ending.

echo "<script>document.getElementById(\"loading\").style.display = \"none\"</script>";

Answer 1

Call flush() after the <div>. If you are using output buffering it won’t work. See the manual for the function.

---

If you don’t want the element to be viewable in source the output is using JS. Instead of directly writing the <div> in the html write this:

<script type="text/javascript">
    document.write('<div id="loading">Loading Results...</div>');
</script>

<?php flush() ?>

<!-- output some html -->

<script type="text/javascript">
    var loader = document.getElementById('loading');
    loader.parentNode.removeChild( loader );
    // This will not just hide the element, but remove it from the DOM, .
</script>