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

Question

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

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

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

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

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

Answer 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和多个数据库调用分隔成小块.

您可以设置web-workers来执行小的100行结果,并LIMIT在sql语句中使用将结果分页为小块.然后,您可以翻阅前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这样的东西