Laravel 5.6 Blade 页面加载微调器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51233978/
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
Laravel 5.6 Blade Page Loading Spinner
提问by Srikanth Gopi
I have completed a project in laravel 5.6. However the only thing thats missing is the loading animation spinner when switching between pages which makes the UI look better and user understand that things are loading.
我已经在 Laravel 5.6 中完成了一个项目。然而，唯一缺少的是在页面之间切换时的加载动画微调器，这使 UI 看起来更好，并且用户可以理解正在加载的内容。
I have a loading.gif image in the public directory which i want to use in between page loads. I couldn't find any tutorial or helpful resources on this.
我在公共目录中有一个 loading.gif 图像，我想在页面加载之间使用它。我找不到任何有关此的教程或有用的资源。
Could anyone tell me what is the easiest way to implement this as i need to get the project to production
谁能告诉我什么是最简单的实现方法，因为我需要将项目投入生产
Thanks in advance
提前致谢
采纳答案by Ehsan feyzolahi
the easiest way for it is that just return a view in your controllers without any database connection and passing variables. then you can make an ajax call when page loaded to get data from the server. when ajax sent and Not answered yet you can show your loading gif. the controller should be like:
最简单的方法是只在控制器中返回一个视图，而无需任何数据库连接和传递变量。然后您可以在页面加载时进行 ajax 调用以从服务器获取数据。当 ajax 发送并且尚未回答时，您可以显示您的加载 gif。控制器应该是这样的：
public function index(Request $request)
if ($request->ajax()) {
// calculations and queries here
}
return view('index');
}
but the better way is to use client-side frameworks like VueJS or AngularJS
但更好的方法是使用客户端框架，如 VueJS 或 AngularJS
回答by Hardik Raval
Place this code in your layout file (ex. app.blade.php) so It can be accessible throughout the system.
将此代码放在您的布局文件（例如 app.blade.php）中，以便可以在整个系统中访问它。
<div class="whole-page-overlay" id="whole_page_loader">
<img class="center-loader" style="height:100px;" src="https://example.com/images/loader.gif"/>
CSS
CSS
.whole-page-overlay{
left: 0;
right: 0;
top: 0;
bottom: 0;
position: fixed;
background: rgba(0,0,0,0.6);
width: 100%;
height: 100% !important;
z-index: 1050;
display: none;
}
.whole-page-overlay .center-loader{
top: 50%;
left: 52%;
position: absolute;
color: white;
}
This will cover your entire page, now you can hide/show the div using #whole_page_loader selector.
这将覆盖您的整个页面，现在您可以使用 #whole_page_loader 选择器隐藏/显示 div。
