php - 从数据库中检索数据时如何显示加载动画或进度条？

Question

• 每次访问此页面时，我都会从我的数据库中检索大约 15,000 行。
• 页面可能需要大约 8-10 秒才能完成加载所有内容 - 我目前使用 DataTable .

• 我认为在此期间向用户显示任何类型的加载反馈会很好。

• 我想创建自己的加载动画，并选择自己的颜色、样式和大小。

• 如果我使用任何 Ajax 调用，我就不会。
• 我只是从我的数据库中检索大量数据。

从数据库检索数据时显示加载动画的最有效方法是什么？

Answer 1

首先，最简单的解决方案是使用 ajax 调用来检索由 php 填充的表行。

JSFiddle

---

简单:

ma​​in.html/main.php

/*This makes the timeout variable global so all functions can access it.*/
var timeout;

/*This is an example function and can be disregarded
This function sets the loading div to a given string.*/
function loaded() {
  $('#loading').html('The Ajax Call Data');
}

function startLoad() {
    /*This is the loading gif, It will popup as soon as startLoad is called*/
    $('#loading').html('<img src="http://rpg.drivethrustuff.com/shared_images/ajax-loader.gif"/>');
    /*
    This is an example of the ajax get method, 
    You would retrieve the html then use the results
    to populate the container.
    
    $.get('example.php', function (results) {
        $('#loading').html(results);
    });
    */
    /*This is an example and can be disregarded
    The clearTimeout makes sure you don't overload the timeout variable
    with multiple timout sessions.*/
    clearTimeout(timeout);
    /*Set timeout delays a given function for given milliseconds*/
    timeout = setTimeout(loaded, 1500);
  }
  /*This binds a click event to the refresh button*/
$('#start_call').click(startLoad);
/*This starts the load on page load, so you don't have to click the button*/
startLoad();

img {
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='start_call'>Refresh</button>
<div id='loading'></div>

php 的一个例子看起来像这样

example.php

/*Database call to get list*/
foreach($list as $li){
    echo "<tr><td>$li[var1]</td><td>$li[var2]</td></tr>";
}

---

高级:

加载内容的更高级方法是使用 webworkers和 multiple database calls分成小块。

您可以设置网络 worker 来处理 100 行的小结果，并在您的 sql 语句中使用 LIMIT 将结果分页为小块。然后您可以在加载其他结果的同时翻阅前 100 个结果。

这个过程更困难，实现起来需要更长的时间，但可以实现无缝和快速加载。

---

编辑:

如果您想更改加载动画，只需更改 URL。如果您希望在页面加载时加载 URL，请将其放在 div 本身中。

/*This will make the img load on page load rather than DOM execution.*/
<div id='loading'>
    <img src="http://rpg.drivethrustuff.com/shared_images/ajax-loader.gif"/>
</div>

图像不一定是图像。它可以是您想要的任何加载图标。一张 gif 又快又脏。你可以使用类似 font-awesome spinner 的东西