Добавление загружаемого изображения при запуске PHP-скрипта

У меня есть PHP-скрипт (вставленный ниже), который извлекает метаданные из списка URL-адресов, проблема в том, что загрузка может занять некоторое время, и пользователь никогда не узнает, когда он будет полностью закончен (если они не будут следить за значком загрузки в вкладка их браузера)

Я долго искал онлайн, но не могу найти решение этого вопроса. Я читал, что могу использовать 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> 

Идея:

Добавить 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> 

Извлеките часть, которая выполняет работу ( <?php ini_set [...] ?> ), Сохраните ее в отдельном файле (например, GetMetaData.php) и верните JSON или XML.

Затем вы можете захватить событие отправки и занести URL-адрес пользователя, введенного в скрипт GetMetaData, асинхронно. Когда этот вызов вернется, вы можете заполнить таблицу, используя данные, возвращаемые скриптом.

Как я уже упоминал в своем комментарии, здесь есть два варианта. Первый зависит от работы javascript, а второй полагается на выходную буферизацию, чтобы дать «быстрый комментарий» о том, что происходит, и зависит от наличия разумных точек в вашем скрипте, где можно было бы выводить отчет о ходе работы.

Подход AJAX просто включает в себя принятие кода, который делает тяжелую работу, и помещает его в свой собственный PHP-скрипт, который может быть включен в AJAX. Главная страница – это просто экран загрузки и javascript, который вызывает скрипт, который выполняет работу через AJAX. Когда сценарий 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, но имеет свои недостатки. Во-первых, в зависимости от того, как буферизация настроена на веб-сервере или в любых прокси-серверах, которые могут существовать между клиентом и сервером, она может вообще не работать и не возвращать никакого вывода до завершения сценария. Во-вторых, дерево DOM будет недействительным до тех пор, пока скрипт на сервере не завершится, и браузер получит </html> закрытия </html> . Это означает, что любой javascript, который использует страница, не может надежно выполнять манипуляции с DOM до тех пор, пока выполняемый процесс не завершится.