Toon ladende afbeelding terwijl PHP wordt uitgevoerd

In de meeste gevallen zou hebben twee pagina's. De eerste pagina, aan de clientzijde, belt naar een andere pagina, aan de serverzijde, en laat een behoorlijk draaiend ding zien terwijl het wacht. Wanneer de server-side pagina klaar is met laden (wanneer uw zoekopdracht is voltooid), ontvangt uw eerste pagina een reactie en dan kunt u het mooie draaiende ding verbergen om uw gebruiker te laten weten dat het klaar is.

Je kunt AJAX gebruiken - in puur Javascript of een stuk eenvoudiger in jQuery - om dynamisch wat gegevens van je PHP-pagina te laden en een draaiend ding te laten zien terwijl het wacht. Ik heb hier jQuery gebruikt.

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 (mijn_php_pagina.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
?>