2017-04-26 19 views
1

我想在远程脚本运行时和我的前端页面处于“正在等待...”状态时添加加载微调器。 我只有1个php页面和一个CSS。 (目前仍在测试中,所以我还没有分割脚本页面和html页面)。在调用远程服务器期间,PHP内部的基本加载器微调器

我为装载机下面的CSS:

style.css的编辑来代替 “”以 “#”

#loader { 
    border: 16px solid #f3f3f3; /* Light grey */ 
    border-top: 16px solid #3498db; /* Blue */ 
    border-radius: 50%; 
    width: 120px; 
    height: 120px; 
    animation: spin 2s linear infinite; 
} 

@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
} 

我的页面看起来像这样(清洗后): 编辑与webbm评论

<!DOCTYPE html> 
<html> 
<head> 
    <title> BETA APP HOME PAGE </title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
    <link rel="stylesheet" href="CSS/style.css"> 
</head> 
<body> 

<div id="loader"></div> 

<?php 
if (isset($_POST['STARTVISUREC'])) 
{ 

    echo '<script>console.log("End loader spinner")</script>'; 
// making appearing the spinner before the call to remote server. 
    echo '<script language="javascript">'; 
    echo 'document.getElementById("loader").style.display="inline"'; 
    echo '</script>'; 

// calling remote APP in BE server. 
$remotstarter = file_get_contents('http://192.168.56.154/WEBAPP/wa_start.php'); 

    echo '<script>console.log("End loader spinner")</script>'; 
// making disappearing the spinner after the call to remote is finished. 
    echo '<script language="javascript">'; 
    echo 'document.getElementById("loader").style.display="hidden"'; 
    echo '</script>'; 

} 
if (isset($_POST['STARTFACEREC'])) 
{ 
// calling local script for other usage. 
shell_exec("sudo python AppPy/cgi-bin/test.py"); 
echo("Off"); 
} 
?> 

<form method="post"> 
<button name="STARTVISUREC">START VISU REC</button>&nbsp; 
<button name="STARTFACEREC">START FACE REC</button><br><br> 
</form> 
<script> 
</script> 
</div> 
</div> 
<div style="margin-left:15%;padding:1px 16px;height:10px;"> 
</div> 
</body> 
</html> 

仍不确定装载微调没有出现

+0

注视fontawesome并添加/删除类“发发微调发旋”你的元素简单,干净的方式装载机添加的元素。 –

+0

我想包含一个函数,并使用我在css中构建的微调器。 – MouIdri

回答

1

具体而言,您可以使用echo脚本标记。

<?php 
echo '<script language="javascript">'; 
echo 'document.getElementById("loader").style.display="inline"'; 
echo '</script>'; 
?> 

注意我周围的"'使用切换。查看echo文档以了解为什么这很有用https://secure.php.net/manual/en/function.echo.php

我建议您查看一下ajax查询,它可以让您根据服务器响应执行JavaScript内部的javascript操作。

这里有一个基本的例子:https://www.w3schools.com/php/php_ajax_php.asp

+0

我改变了它,我也换成了:

但仍然不行 – MouIdri

+0

@MouIdri你可以发布一个更新到你的原代码吗? – webbm

+0

@ webbm:完成。 – MouIdri