Laravel 5.6 Blade 页面加载微调器

Question

我在 laravel 5.6 完成了一个项目。然而，唯一缺少的是在页面之间切换时加载动画微调器，这使得 UI 看起来更好，并且用户明白东西正在加载。

我在 public 目录中有一张 loading.gif 图片，我想在页面加载之间使用它。我找不到任何教程或有用的资源。

任何人都可以告诉我什么是最简单的实现方法，因为我需要将项目投入生产

提前致谢

Answer 1

最简单的方法是 return 控制器中的一个视图，无需任何数据库连接和传递变量。然后您可以在页面加载时进行 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 选择器 hide/show div。

Laravel 5.6 Blade 页面加载微调器

Laravel 5.6 Blade Page Loading Spinner

laravel

laravel-5.6