laravel adminlte 的预加载动画（preloader）常在页面 html 渲染后才启动，导致出现约1秒的“裸 html 闪屏”——根本原因在于非 content 区域的 html 内容破坏了 adminlte 的 dom 加载时序。
laravel adminlte 的预加载动画（preloader）常在页面 html 渲染后才启动，导致出现约1秒的“裸 html 闪屏”——根本原因在于非 content 区域的 html 内容破坏了 adminlte 的 dom 加载时序。
AdminLTE 的预加载机制依赖于完整的、结构受控的 DOM 初始化流程：其 JavaScript（如 adminlte.js）默认在 DOMContentLoaded 后检查
是否已就绪，并基于 .wrapper、.content-wrapper 等标准容器触发 preloader 显示/隐藏逻辑。当开发者在 @extends('adminlte::page') 模板之外（例如在布局文件顶部、 中或 @section 外）直接写入 HTML、内联样式、脚本或未包裹的标签时，浏览器会提前解析并渲染这些内容，而此时 AdminLTE 的 CSS 尚未完全加载、JS 也未执行，导致视觉上出现「先显示原始 HTML，再跳转到美化界面」的闪烁现象。✅ 正确做法：严格遵循 AdminLTE 的布局契约
所有可视内容必须且仅能置于 @section('content') 内部，确保 DOM 结构由 AdminLTE 主布局统一控制：
{{-- resources/views/pages/fire-hazard.blade.php --}}
@extends('adminlte::page')
@section('title', 'Fire Hazard')
@section('content')
<!-- ✅ 所有页面内容（HTML、组件、图表等）必须在此区域内 -->
<div class="card">
<div class="card-header">
<h3 class="card-title">Fire Hazard Assessment</h3>
</div>
<div class="card-body">
<p>This content loads smoothly — no flash, no layout jump.</p>
<x-adminlte-button label="Export Report" theme="primary" />
</div>
</div>
@endsection
{{-- ❌ 禁止以下写法： --}}
{{-- <div class="my-override">This will break preloader!</div> --}}
{{-- @section('content') ... @endsection --}}
{{-- <script>console.log('outside section');</script> --}}⚠️ 关键注意事项：
-
不要在 @section('content') 外添加任何 HTML 元素（包括 、
、空格换行等），即使看似无害；
- 如需自定义 内容（如 SEO 标签、额外 CSS），请使用 @push('css') 或 @section('htmlheader')（参考 AdminLTE 文档）；
- 若需禁用预加载动画，推荐通过配置而非移除 JS：在 config/adminlte.php 中设置 'preloader' => false；
- 自定义 preloader 时，务必在 adminlte::page 布局的 开头插入
...，并在 @stack('js') 前用内联脚本控制显隐，确保其早于所有内容渲染。总结：AdminLTE 的 preloader 不是“CSS 动画开关”，而是整个前端生命周期管理的一部分。修复的核心不是增强动画，而是回归框架约定——让所有内容都成为 @section('content') 的子节点，从而保障 DOM 构建、资源加载与 JS 初始化的原子性与顺序性。
