Laravel集成AdminLTE预加载异常问题求助

方案一：优化自带预加载器的加载时机 #

AdminLTE自带预加载器默认启动较晚，导致无样式HTML闪烁，可通过强制隐藏页面内容、提前触发预加载器解决：

1. 添加自定义CSS，强制页面初始隐藏，仅显示预加载器
   在页面的@section('css')中插入以下样式：

body {
    visibility: hidden;
}
#preloader {
    visibility: visible;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff; /* 匹配你的主题背景色 */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

2. 监听资源加载完成事件，显示页面并隐藏预加载器
   在@section('js')中插入脚本：

window.addEventListener('load', function() {
    const preloader = document.getElementById('preloader');
    if (preloader) {
        // 添加淡出动画过渡
        preloader.style.opacity = '0';
        setTimeout(() => preloader.style.display = 'none', 300);
    }
    // 显示页面内容
    document.body.style.visibility = 'visible';
});

完整页面示例：

@extends('adminlte::page')

@section('title', 'Fire Hazard')

@section('css')
    <style>
        body {
            visibility: hidden;
        }
        #preloader {
            visibility: visible;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 99999;
        }
    </style>
@endsection

@section('content')
    <!-- 你的页面内容 -->
@endsection

@section('js')
    <script>
        window.addEventListener('load', function() {
            const preloader = document.getElementById('preloader');
            if (preloader) {
                preloader.style.opacity = '0';
                setTimeout(() => preloader.style.display = 'none', 300);
            }
            document.body.style.visibility = 'visible';
        });
    </script>
@endsection

方案二：禁用自带预加载器，自定义实现 #

如果自带预加载器无法满足需求，可直接禁用并自定义：

1. 禁用AdminLTE自带预加载器
   修改config/adminlte.php配置文件，将预加载器设置为禁用：

'preloader' => [
    'enabled' => false,
    // 保留其他默认配置（如有）
],

2. 自定义预加载器样式与逻辑
   在页面中插入自定义的预加载器HTML、CSS和JS：

@extends('adminlte::page')

@section('title', 'Fire Hazard')

@section('css')
    <style>
        .custom-preloader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 99999;
            transition: opacity 0.3s, visibility 0.3s;
        }
        .custom-preloader .spinner {
            width: 50px;
            height: 50px;
            border: 5px solid #f3f3f3;
            border-top: 5px solid #3498db; /* 匹配主题主色调 */
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        /* 页面加载完成后隐藏预加载器 */
        body.page-loaded .custom-preloader {
            opacity: 0;
            visibility: hidden;
        }
    </style>
@endsection

@section('content')
    <!-- 自定义预加载器HTML -->
    <div class="custom-preloader">
        <div class="spinner"></div>
    </div>

    <!-- 你的页面内容 -->
@endsection

@section('js')
    <script>
        // 等待所有资源加载完成后标记页面为已加载
        window.addEventListener('load', function() {
            document.body.classList.add('page-loaded');
        });
    </script>
@endsection

内容的提问来源于stack exchange，提问作者Filipe Cruz