Adding loading image while PHP script runs

Question

I have a PHP script (pasted below) which pulls in meta data from a list of URL's, the problem is it can take a while to load and the user never knows when it's completely finished (unless they keep an eye on the loading icon in their broswer tab)

I've been looking around online for a long time but cannot find a solution to this, I've read I can use Ajax but how exactly could I use it on this script?

Thanks for the help!

<script type="text/javascript">
function showContent(vThis)
{
    // http://www.javascriptjunkie.com
    // alert(vSibling.className + " " + vDef_Key);
    vParent = vThis.parentNode;
    vSibling = vParent.nextSibling;
    while (vSibling.nodeType==3) { // Fix for Mozilla/FireFox Empty Space becomes a TextNode or         Something
        vSibling = vSibling.nextSibling;
    };
    if(vSibling.style.display == "none")
    {
        vThis.src="collapse.gif";
        vThis.alt = "Hide Div";
        vSibling.style.display = "block";
    } else {
        vSibling.style.display = "none";
        vThis.src="expand.gif";
        vThis.alt = "Show Div";
    }
    return;
}

</script>



<form method="POST" action=<?php echo "'".$_SERVER['PHP_SELF']."'";?> >
<textarea name="siteurl" rows="10" cols="50">
<?php //Check if the form has already been submitted and if this is the case, display the   submitted content. If not, display 'http://'.
echo (isset($_POST['siteurl']))?htmlspecialchars($_POST['siteurl']):"http://";?>
</textarea><br>
<input type="submit" value="Submit">
</form>
</div>

<div id="nofloat"></div>
<div style="margin-top:5px;">
<h4><img src="expand.gif" alt="Show Div" border="0" style="margin-right:6px; margin-  top:3px; margin-bottom:-3px; cursor:pointer;" onclick="showContent(this);" />Show me the    script working!</h4>
<div style="margin-top:5px; display:none;">
<table class="metadata" id="metatable_1">
<?php
ini_set('display_errors', 0);
ini_set( 'default_charset', 'UTF-8' );
error_reporting(E_ALL);
//ini_set( "display_errors", 0);
function parseUrl($url){
    //Trim whitespace of the url to ensure proper checking.
    $url = trim($url);
    //Check if a protocol is specified at the beginning of the url. If it's not,     prepend 'http://'.
    if (!preg_match("~^(?:f|ht)tps?://~i", $url)) {
            $url = "http://" . $url;
    }
    //Check if '/' is present at the end of the url. If not, append '/'.
    if (substr($url, -1)!=="/"){
            $url .= "/";
    }
    //Return the processed url.
    return $url;
}
//If the form was submitted
if(isset($_POST['siteurl'])){
    //Put every new line as a new entry in the array
    $urls = explode("\n",trim($_POST["siteurl"]));
    //Iterate through urls
    foreach ($urls as $url) {
            //Parse the url to add 'http://' at the beginning or '/' at the end if not   already there, to avoid errors with the get_meta_tags function
            $url = parseUrl($url);
            //Get the meta data for each url
            $tags = get_meta_tags($url);
            //Check to see if the description tag was present and adjust output    accordingly
            $tags = NULL;
$tags = get_meta_tags($url);
if($tags)
echo "<tr><td>$url</td><td>" .$tags['description']. "</td></tr>";
else 
echo "<tr><td>$url</td><td>No Meta Description</td></tr>";
    }
}
?>
</table>
</div>
<script type="text/javascript">
        var exportTable1=new ExportHTMLTable('metatable_1');
    </script>
<div>
        <input type="button" onclick="exportTable1.exportToCSV()"   value="Export to CSV"/>
        <input type="button" onclick="exportTable1.exportToXML()"   value="Export to XML"/>
    </div>
</div>

Answer 1

Idea:

Add php code to different file

Show the loading image

And then call this function

function Load()
{
    var xmlhttp;
    var url;

    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {           
            //(optional)do something with response: xmlhttp.responseText
            document.getElementById("area").innerHTML=xmlhttp.responseText;
            document.getElementById("loadingimage").src = "afterloading.gif";
        }
    }

    xmlhttp.open("GET","phpfile.php",true);
    xmlhttp.send();
}

this function goes to your javascript place then either call it with jquery after document finishes loading or

<body onload="Load()">

and in body place something like

<img id="loadingimage" src="loading.gif"/>
<div id="area">...</div>

Answer 2

As I mentioned in my comment, there's basically two options here. The first depends on javascript to work, and the second relies on output buffering to give a "running commentary" of sorts as to what's happening and depends on there being sensible points in your script where a progress report could be output.

The AJAX approach simply involves taking the code that does the heavy lifting and placing it in its own PHP script that can be involed over AJAX. The main page is then simply a loading screen and a javascript that invokes the script that does the work via AJAX. When the AJAX script completes a callback function can be triggered to format the returned results as HTML and display it in place of the loading screen.

The other approach involves using output buffering and flushing in the main loop of your script.

while ($task_not_complete)
{
    do_some_more_work ();
    echo ('<p>Something indicating how much progress has been made goes here</p>');
    ob_flush ();
    flush ();
}

This approach doesn't require javascript, but it has its own drawbacks. First, depending on how buffering is set up in the web server or in any proxies that might exist between the client and the server it might not work at all and return no output at all until the script completes. Second, the DOM tree will not be valid until the script on the server has finished and the browser has received the closing </html> tag. This means that any javascript the page uses cannot reliably do DOM manipulation until the process being executed completes.

Answer 3

Extract the part that does the work (<?php ini_set [...] ?>), store it in a separate file (GetMetaData.php for example) and make it return JSON or XML.

You can then capture the submit event and make it post the URL's the user entered to the GetMetaData script, asynchronically. When that call returns, you can populate your table using the data the script returned.