Question

我已经在laravel 5.6中完成了一个项目。但是，唯一缺少的是在页面之间切换时加载动画微调器，这使UI看起来更好，并且用户了解正在加载内容。

我在公共目录中有一个loading.gif图像，我想在两次页面加载之间使用它。我找不到与此相关的任何教程或有用的资源。

谁能告诉我实现此目的最简单的方法是什么，因为我需要将项目投入生产

预先感谢

Answer 1

最简单的方法是，只需在控制器中返回视图，而无需任何数据库连接和传递变量。那么您可以在页面加载时进行ajax调用，以从服务器获取数据。发送ajax并尚未回答时，您可以显示您的加载gif。控制器应该像这样：

public function index(Request $request)
    if ($request->ajax()) {
      // calculations and queries here
    }

    return view('index');
}

但是更好的方法是使用客户端框架，例如VueJS或AngularJS

Answer 2

将此代码放在您的布局文件（例如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

.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;
}

这将覆盖您的整个页面，现在您可以使用#whole_page_loader选择器隐藏/显示div。

Laravel 5.6刀片页面加载微调器

2 个答案: