在PHP腳本運行時添加加載圖像

我有一個PHP腳本（粘貼在下面），它從URL列表中提取元數據，問題是可能需要一段時間才能加載，並且用戶永遠不知道它何時完成（除非他們留意他們的瀏覽器標籤中的加載圖標）在PHP腳本運行時添加加載圖像

我一直在網上尋找很長一段時間，但找不到解決方案，我讀過我可以使用Ajax，但我怎麼能在這個腳本上使用它？

感謝您的幫助！

<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>

來源

2012-04-25 RuFFCuT

你可以嘗試修剪腳本到相關的位？閱讀這些內容有點多。如果您不介意該網站只啓用JavaScript，那麼您可以使主頁面顯示一條加載消息，並踢出腳本，通過AJAX請求進行繁重的操作。如果你想要一個純粹的PHP解決方案，那麼可能會有大量的輸出緩衝和沖洗 – GordonM 2012-04-25 09:11:46

當然！對於那個很抱歉！ – RuFFCuT 2012-04-25 09:12:41

理念：

添加PHP代碼到不同的文件

顯示加載圖像

然後再調用這個函數

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(); 
}

此功能去你的JavaScript的地方然後呼叫它帶有jquery文件完成加載後或

<body onload="Load()">

，並在身體發生類似

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

來源

2012-04-25 09:20:08

嗯聽起來很有趣，所以我會做的是例如拿出我的PHP把它放在另一個文件中，然後將此代碼放在自己的位置？我將如何顯示加載圖像？（對不起，我有點小菜）。 – RuFFCuT 2012-04-25 09:23:58

根據您的要求更新了代碼。 – 2012-04-25 09:32:41

非常感謝你！所以，因爲我的PHP輸出數據到一個HTML表格，我需要將它分成兩部分？所以HTML回顯部分進入我的前端頁面，其餘部分進入後端？ – RuFFCuT 2012-04-25 09:55:59

提取該做的工作（<?php ini_set [...] ?>），將其存儲在一個單獨的文件中的部分（GetMetaData.php爲例），並使其返回JSON或XML。

然後，您可以捕獲提交事件，並使其以異步方式發佈用戶輸入到GetMetaData腳本的URL。當該調用返回時，可以使用腳本返回的數據填充表。

來源

2012-04-25 09:14:40 CodeCaster

正如我在我的評論中提到，有基本上這裏有兩個選項。第一個依賴javascript來工作，第二個依賴於輸出緩衝來給出關於正在發生的事情的「正在運行的評論」，並取決於腳本中可以輸出進度報告的敏感點。

AJAX方法只是簡單地將代碼完成繁重的工作，並將其放置在自己的可通過AJAX調用的PHP腳本中。然後主頁面只是一個加載屏幕和一個調用通過AJAX完成工作的腳本的JavaScript。當AJAX腳本完成時，可以觸發回調函數將返回的結果格式化爲HTML，並將其顯示爲加載屏幕。

另一種方法涉及在腳本的主循環中使用輸出緩衝和刷新。

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

這種方法不需要JavaScript，但它有它自己的缺點。首先，根據Web服務器或客戶端與服務器之間可能存在的代理服務器如何設置緩衝區，它可能根本無法工作，直到腳本完成後纔會返回任何輸出。其次，在服務器上的腳本完成並且瀏覽器收到關閉</html>標記之前，DOM樹纔會生效。這意味着，在正在執行的進程完成之前，該頁面使用的任何JavaScript都無法可靠地進行DOM操作。

來源

2012-04-25 09:32:39 GordonM

在PHP腳本運行時添加加載圖像

回答

相關問題