Tampilkan memuat gambar saat PHP sedang dijalankan

Dalam sebagian besar kasus, Anda akan memiliki dua halaman. Halaman pertama, sisi klien, membuat panggilan ke halaman lain, sisi server, dan menunjukkan hal yang cukup berputar saat menunggu. Ketika halaman sisi server selesai dimuat (ketika kueri Anda selesai) halaman pertama Anda menerima respons dan kemudian Anda dapat menyembunyikan hal yang berputar indah untuk memberi tahu pengguna bahwa itu sudah selesai.

Anda dapat menggunakan AJAX - dalam Javascript murni atau jauh lebih sederhana di jQuery - untuk memuat beberapa data secara dinamis dari halaman PHP Anda dan menunjukkan sesuatu yang berputar saat menunggu. Saya telah menggunakan jQuery di sini.

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
?>