Hiển thị hình ảnh đang tải trong khi PHP đang thực thi

Trong phần lớn các trường hợp, bạn sẽ có hai trang. Trang đầu tiên, phía máy khách, thực hiện cuộc gọi đến một trang khác, phía máy chủ và hiển thị một thứ khá quay trong khi chờ đợi. Khi trang phía máy chủ tải xong (khi truy vấn của bạn hoàn tất), trang đầu tiên của bạn sẽ nhận được phản hồi và sau đó bạn có thể ẩn thứ đang quay đẹp mắt để cho người dùng của bạn biết rằng nó đã hoàn tất.

Bạn có thể sử dụng AJAX - trong Javascript thuần túy hoặc đơn giản hơn nhiều trong jQuery - để tải động một số dữ liệu từ trang PHP của bạn và hiển thị một thứ quay cuồng trong khi chờ đợi. Tôi đã sử dụng jQuery ở đây.

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