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>

Could you try to trim the script down to the relevant bits? It's a bit much to read through. If you don't mind the site only working with javascript enabled then you could make the main page just display a loading message and kick the script that does the heavy lifting off with an AJAX request. If you want a pure PHP solution then there will probably be a lot of output buffering and flushing involved — GordonM
– GordonM, Commented Apr 25, 2012 at 9:11

Andrius Naruševičius · Accepted Answer · 2012-04-25 10:14:26Z

5

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>

edited Apr 25, 2012 at 10:14

answered Apr 25, 2012 at 9:20

Andrius Naruševičius

8,6289 gold badges53 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

RuFFCuT Over a year ago

Hmm sounds interesting, so what I'd do is for example take out my php put it in another file, then place this code in its place? How would I show the loading image? (sorry im a bit of a noob).

RuFFCuT Over a year ago

Great thank you! So since my php outputs data into an HTML table would I need to split it into two parts? So the HTML echo part goes into my front end page and the rest into the back end?

Andrius Naruševičius Over a year ago

//(optional)do something with response: xmlhttp.responseText At this place you should write something like document.getElementById("area").innerHTML=xmlhttp.responseText; Also put <div id="area">...</div> somewhere in your body. Once the output from phpfile.php fully loads, it will be put into that div

Andrius Naruševičius Over a year ago

Updated the code accordingly. If I wasn't at work, I would send you the full working thing. However I do not have php at my hand at the moment.

RuFFCuT Over a year ago

Ok great, thanks for your help! I'll try and figure the rest out :)

CodeCaster · Accepted Answer · 2012-04-25 09:14:40Z

1

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.

answered Apr 25, 2012 at 9:14

CodeCaster

153k24 gold badges237 silver badges287 bronze badges

Comments

GordonM · Accepted Answer · 2012-04-25 09:32:39Z

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.

Collectives™ on Stack Overflow

Adding loading image while PHP script runs

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related