laravel 从数据库中检索数据时如何显示加载动画或进度条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28774634/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show loading animations or progress bars when retrieve data from database?
提问by iori
- I retrieve about 15,000rows from my database every time I visit this page.
- The page might take about 8-10seconds to finish load everything - I currently, use DataTable.
I think it would be nice to show user any kind of loading feedback during that time.
I want to create my own loading animations, and chose my own color, style, and size.
- 每次访问此页面时，我都会从数据库中检索大约15,000行。
- 该页面可能需要大约8-10秒才能完成加载所有内容 - 我目前使用DataTable。
我认为在那段时间向用户展示任何类型的加载反馈会很好。
我想创建自己的加载动画，并选择自己的颜色、样式和大小。
- I'm not if I use any Ajax call.
- I am just retrieving a lot of data out of my database.
- 如果我使用任何 Ajax 调用，我就不会。
- 我只是从我的数据库中检索大量数据。
What is the most efficient way to show loading animation while retrieving data from database ?
从数据库检索数据时显示加载动画的最有效方法是什么？
采纳答案by Neoaptt
To begin with, the most simple solution is to use ajax call to retrieve the table rows populated by php.
首先，最简单的解决方案是使用 ajax 调用来检索由 php 填充的表行。
SIMPLE:
简单的：
main.html / main.php
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>An example of the php would look something like this
php 的一个例子看起来像这样
example.php
例子.php
/*Database call to get list*/
foreach($list as $li){
echo "<tr><td>$li[var1]</td><td>$li[var2]</td></tr>";
}
ADVANCED:
先进的：
A more advanced way to load your content is to use webworkersand multiple database callssegregated into small chunks.
加载内容的一种更高级的方法是使用网络工作者和分离成小块的多个数据库调用。
You would set up web-workers to do small 100 row results and use LIMITin your sql statements to page the results into small chunks. Then you can page through the first 100 results while the other results are loading.
您将设置网络工作者来处理 100 行的小结果，并LIMIT在您的 sql 语句中使用将结果分页为小块。然后，您可以在加载其他结果时翻阅前 100 个结果。
This process is more difficult and takes longer to implement, but leads to seamless and quick loading.
这个过程更困难，需要更长的时间来实现，但会导致无缝和快速加载。
EDIT:
编辑：
If you want to change the loading animation just change the URL. and if you want the URL to be loaded on page load put it in the div itself.
如果您想更改加载动画，只需更改 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>
The Image doesn't have to be an image. It can be any loading icon you want. A gif was quick and dirty. You could use something like font-awesome spinner
图像不必是图像。它可以是您想要的任何加载图标。gif 又快又脏。你可以使用类似font-awesome spinner 的东西
回答by Ahmed Zelfani
data.php to check out the DB and build the table's HTML
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();
回答by anEffingChamp
This depends on what language you use, but the fundamentals are the same. You load the page with just the animation while the query completes, and then replace the animation with the content.
这取决于您使用的语言，但基本原理是相同的。您在查询完成时只加载带有动画的页面，然后用内容替换动画。
In jQuery this probably means linking the animation in plain HTML, then separately calling the database with AJAX. When you get the result, you can use jQuery appendto target the content area, and write into that in real time.
在 jQuery 中，这可能意味着在纯 HTML 中链接动画，然后使用 AJAX 单独调用数据库。得到结果后，您可以使用jQuery append来定位内容区域，并实时写入内容区域。
I include PHP since you say that you are not using AJAX, but in PHP the structure is the same: You would need to link the image, flush the pageso that it displays, and then execute your query. Cover the animation with negative CSS margin-topon the search results, and Bob is your uncle.
我包括 PHP，因为您说您没有使用 AJAX，但在 PHP 中结构是相同的：您需要链接图像、刷新页面以使其显示，然后执行您的查询。margin-top在搜索结果上用负 CSS 覆盖动画，Bob 是你的叔叔。
回答by Medo
Your question :
你的问题 ：
"I want to create my own loading animations, and chose my own color, style, and size."
“我想创建自己的加载动画，并选择自己的颜色、样式和大小。”
You should visit http://www.ajaxload.info/there you can chose,customize and download loading gif really fast.
您应该访问http://www.ajaxload.info/在那里您可以选择、自定义和下载加载 gif 非常快。
