PHP 执行时显示加载图像

Question

我想在 php 脚本执行时显示加载图像。我读过关于如何做到这一点的不同答案，但大多数人都说我应该有一个单独的 php 页面。但是我使用单页来显示行，那么我怎样才能显示加载图像？

我用来获取数据的选择查询示例：

 $stmt = $mydb->prepare("select * from table where firstname = ?  and id = ? ");
 $stmt->bind_param('ss', $firstname, $id);
 $stmt->execute();
 $stmt->close();

Answer 1

在大多数情况下，您会有两页。第一个页面（客户端）调用另一个页面（服务器端），并在等待时显示一个非常旋转的东西。当服务器端页面完成加载时（当您的查询完成时），您的第一个页面会收到响应，然后您可以隐藏漂亮的旋转内容，让您的用户知道它已完成。

您可以使用 AJAX - 在纯 Javascript 中或在 jQuery 中更简单 - 从 PHP 页面动态加载一些数据，并在等待时显示一个旋转的东西。我在这里使用了 jQuery。

CSS

#loading_spinner { display:none; }

HTML

<img id="loading_spinner" src="loading-spinner.gif">

<div class="my_update_panel"></div>

jQuery

$('#loading_spinner').show();

var post_data = "my_variable="+my_variable;
$.ajax({
    url: 'ajax/my_php_page.php',
    type: 'POST',
    data: post_data,
    dataType: 'html',
    success: function(data) {
        $('.my_update_panel').html(data);
//Moved the hide event so it waits to run until the prior event completes
//It hide the spinner immediately, without waiting, until I moved it here
        $('#loading_spinner').hide();
    },
    error: function() {
        alert("Something went wrong!");
    }
});

PHP（my_php_page.php）

<?php
// if this page was not called by AJAX, die
if (!$_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') die('Invalid request');

// get variable sent from client-side page
$my_variable = isset($_POST['my_variable']) ? strip_tags($_POST['my_variable']) :null;

//run some queries, printing some kind of result
$SQL = "SELECT * FROM myTable";
// echo results
?>

Answer 2

你实际上无法在 PHP 中做到这一点，你必须在 JavaScript 中做一些事情。因此，您可能想要做的是让 JQuery 显示加载微调器，然后对 PHP 作业执行 AJAX 请求，当您取回数据时，隐藏加载指示器。

Answer 3

我只用 php 做到了。在我的页面开头，我放置了

CSS

.process {
display:none;
}

.loading {
display:block;
}

我的页面...

HTML

<span class="loading" style="position:relative;left:340px;"><img 
src="https://i.stack.imgur.com/ATB3o.gif"></span>
<div class="process" height=100% style="height:3300px;overflow:hidden;">  

在我的页面末尾...

PHP

<?php 

echo "<style>";
echo ".process { display:block; } .loading { display:none;";
echo "</style>";

?>