在 PHP 执行时显示加载图像

Posted

技术标签:

【中文标题】在 PHP 执行时显示加载图像【英文标题】:Show loading image while PHP is executing 【发布时间】:2013-09-26 11:27:06 【问题描述】:

我想在 php 脚本执行时显示加载图像。我已经阅读了有关如何执行此操作的不同答案,但其中大多数都表示我应该有一个单独的 php 页面。但是我使用单页显示行,那么我怎样才能显示加载图像?

选择查询示例,我用于获取数据:

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

【问题讨论】:

该查询看起来不应该花费任何时间,真的。就是这样吗? 大约需要 3-4 秒。 查询一行?这听起来不对。 我还有其他问题,我的错。 您需要考虑优化您的查询。除非您在谈论一些典型站点用户看不到的后端数据分析类型的事情,否则您永远不应处于渲染页面所需的查询需要 3-4 秒的位置。 【参考方案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
?>

【讨论】:

【参考方案2】:

您不能在 PHP 本身中真正做到这一点,您必须在 JavaScript 中为此做一些事情。所以你可能想要做的是让 JQuery 显示一个加载微调器,然后对你的 PHP 作业执行一个 AJAX 请求,当你取回数据时,隐藏加载指示器。

【讨论】:

嗯,这并不完全正确,php 只使用渐进式渲染(分块编码)应该是可能的。但这不是值得推荐的东西。

以上是关于在 PHP 执行时显示加载图像的主要内容,如果未能解决你的问题,请参考以下文章

如何在 url 加载时显示图像

在 Flask 中执行耗时功能时显示“正在加载”图像 [重复]

PHP:在执行 php 脚本时显示“加载”页面

在加载电影时显示图像

通过 jQuery 加载图像时显示加载图像

加载 Webview 时显示图像