使用 Laravel 邮件功能时的 CSS 延迟答案

【问题标题】：CSS delay when Laravel mail function is used使用 Laravel 邮件功能时的 CSS 延迟
【发布时间】：2020-09-18 21:08:26
【问题描述】：

我正在使用 Laravel 6。我有一个按钮，当它被点击时会被触发。点击事件做了两件事。它向按钮添加了一个 css 类，该按钮显示了一个动画 svg 微调器，以指示正在加载某些内容，并将信息发送到我的控制器，该控制器发送一封电子邮件。微调器类在单击按钮后立即设置，但问题是微调器仅在发送邮件时显示。但我希望在发送时显示微调器，以便用户知道他必须等待。

这是我的 .spinner 类

.spinner {
background-image: url(storage/app/public/img/spinner.svg);
background-size: 100% 100%;
height: 40px;
width: 40px;
}

这是我的子组件中可以点击的按钮：

<button class="btn btn-success teamplayerButton" @click="addSpinner($event.target); $emit('del-match', match.id);">Add
</button>

子组件上的addSpinner方法：

addSpinner(match) {
match.classList.toggle('spinner');
match.innerText = "";
}

父组件获取发出的 match.id 并向发送邮件的路由发出 get 请求，如下所示：

Mail::to($email)->send(new ReceivedInvitation(Auth::user()->name, $receiverName));

这是一个简短的视频，向您展示我的意思。 click here

为什么 css 依赖于后端的 php(laravel) 做什么？ css 会立即设置，但动画会在几秒钟后显示。当我在我的控制器中删除邮件功能的调用，然后再试一次，微调器立即显示。

【问题讨论】：

标签： javascript php css laravel vue.js

【解决方案1】：

看起来 CSS 会立即更改，但实际图像要等到 AJAX 调用完成后才会加载。

我会检查您的网络选项卡以了解微调器文件是如何加载的，并查看它是否因某种原因被 AJAX 调用阻止。如果它不仅仅是一个静态文件，那么可能会发生其他事情。

【讨论】：

我检查了网络选项卡并注意到，图像处于“待处理”状态几秒钟，然后在显示时变为状态“200”。它只是一个静态文件。我该怎么做才能使其独立于 ajax 调用？可以看到网络标签here
您始终可以直接嵌入 SVG，而不是加载静态文件。在不深入了解您正在使用的框架的复杂性的情况下，我会说这很容易解决。