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

【问题标题】：How to show loading animations or progress bars when retrieve data from database?从数据库中检索数据时如何显示加载动画或进度条？
【发布时间】：2015-04-30 17:30:41
【问题描述】：

每次访问此页面时，我都会从数据库中检索大约 15,000 行。
该页面可能需要大约 8-10 秒才能完成加载所有内容 - 我目前使用 DataTable。
我认为在此期间向用户显示任何类型的加载反馈会很好。
我想创建自己的加载动画，并选择自己的颜色、样式和大小。

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

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

【问题讨论】：

如果你不使用Ajax，那你是怎么做的？
(function () { // start animation })(); window.onload = function () { // remove animation };
如果您使用 JavaScript 下载数据，我 99% 确定您使用的是 Ajax。
@RobertoNovelo：对不起。我编辑的帖子可能使用了我可能不知道的 Ajax。你可能是对的！
如果您不希望页面冻结，您应该使用异步调用... ajax 调用非常适合此.. 只需在执行调用之前将加载程序设置在该行之前，然后回调返回后删除加载程序... webworks 可能会工作，但看起来有点矫枉过正，不是吗？

标签： php jquery css laravel laravel-4

【解决方案1】：

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

JSFiddle

简单：

main.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 分隔成小块。

您将设置 web-workers 来处理 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

【讨论】：

干得好，到目前为止我真的很喜欢你的回答，这正是我要找的。我会确保尽快接受这一点。我有 2 个简单的问题要问你。 1.如果我想改变风格，我只需要将url更改为src对吗？它必须是 .gif 吗？
2.有没有办法早一点显示我的加载动画？我注意到它在我点击浏览器上的刷新按钮 11 秒后显示了大约 4 秒。我希望它在我点击刷新按钮后立即显示。我可以根据你的 sn-p 做到这一点吗？

【解决方案2】：

data.php 来检查数据库并构建表格的 HTML

function getData(){

    //div contains the loader
    $('#loader').show();

    $.get('clients/data.php', function(data) {
        //
        $('#content').html(data);
        //hide the loader
        $('#loader').hide();
        //build DataTable
        $('#content table').dataTable();

    });
}

getData();

【讨论】：

【解决方案3】：

这取决于您使用的语言，但基本原理是相同的。您在查询完成时仅使用动画加载页面，然后将动画替换为内容。

在 jQuery 中，这可能意味着在纯 HTML 中链接动画，然后使用 AJAX 单独调用数据库。当你得到结果时，你可以使用jQuery append来定位内容区域，并实时写入。

我包括 PHP，因为您说您没有使用 AJAX，但在 PHP 中结构是相同的：您需要链接图像 flush the page 以便它显示，然后执行您的查询。在搜索结果上用负 CSS margin-top 覆盖动画，Bob 就是你的叔叔。

【讨论】：

【解决方案4】：

你的问题：

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

您应该访问http://www.ajaxload.info/ 那里您可以选择、自定义和下载加载 gif 非常快。

【讨论】：