Laravel中Turbolinks切换视图时内容先于CSS/图片加载的问题如何解决？

你遇到的无样式内容闪烁问题核心原因如下：

1. 你将页面专属的auth.css放在了<body>标签内，不符合CSS资源加载规范，浏览器渲染到body区域时才会发起CSS请求，请求返回前页面就会显示无样式内容。你测试内联CSS有效就是因为内联CSS不需要额外发起网络请求，渲染时可直接读取，但是不符合工程化规范不推荐使用。
2. Turbolinks默认的页面替换逻辑是先替换body内容，再异步加载body内引用的外部资源，不会等待资源加载完成后再展示新内容。

方案1：调整CSS资源加载位置（最推荐，无需修改Turbolinks配置） #

Laravel自带的@stack指令专门用于处理页面专属的静态资源引入，完全符合开发规范：

1. 在基础布局layouts/base.blade.php的<head>标签末尾添加栈占位：

<head>
    <!-- 原有全局meta、CSS、JS引入保持不变 -->
    @stack('styles')
</head>

2. 修改登录页的资源引入逻辑，将所有CSS放到head的栈中，移除body内的CSS引入代码：

@extends('./layouts/base')
@section('title', 'Become a Tuper Seller')
@push('styles')
  <link rel="stylesheet" href="{{ asset('fonts/material-icon/css/material-design-iconic-font.min.css') }}"> 
  <link rel="stylesheet" href="{{ mix('css/auth.css') }}">
@endpush
@section('body')
<!-- 原有body内容保持不变，删除body开头的auth.css引入 -->
<div class="auth-form">
...
</div>
@endsection

该方案会让所有CSS资源都在head区域加载，Turbolinks跳转时会先识别并加载head中新增的CSS资源，完成后才会渲染body内容，可直接解决样式闪烁问题。

方案2：配置Turbolinks等待所有资源加载完成后再渲染 #

如果需要同时等待图片等其他资源加载完成再切换视图，将以下代码添加到全局JS文件中即可：

document.addEventListener('turbolinks:before-render', (event) => {
  // 阻止默认立即渲染行为
  event.preventDefault()
  const newDocument = event.data.newDocument
  
  const loadResources = async () => {
    // 先加载所有新页面的样式资源
    const styles = newDocument.querySelectorAll('link[rel="stylesheet"]')
    await Promise.all(Array.from(styles).map(style => {
      return new Promise((resolve) => {
        const link = document.createElement('link')
        link.rel = style.rel
        link.href = style.href
        link.onload = resolve
        link.onerror = resolve // 资源加载错误也继续执行，避免页面卡死
        document.head.appendChild(link)
      })
    }))
    
    // 预加载所有新页面的图片资源
    const images = newDocument.querySelectorAll('img')
    await Promise.all(Array.from(images).map(img => {
      return new Promise((resolve) => {
        const newImg = new Image()
        newImg.src = img.src
        newImg.onload = resolve
        newImg.onerror = resolve
      })
    }))
    
    // 所有资源加载完成后手动触发Turbolinks渲染
    Turbolinks.render(event.data)
  }
  
  loadResources()
})

方案3：添加防闪烁样式兜底 #

可以配合以上两个方案添加全局样式，避免极端场景下的闪烁问题：

/* 加入全局CSS文件 */
.turbolinks-loading body {
  opacity: 0;
  transition: opacity 0.1s ease;
}
body {
  opacity: 1;
}

同时在全局JS中添加类名切换逻辑：

document.addEventListener('turbolinks:request-start', () => {
  document.documentElement.classList.add('turbolinks-loading')
})
document.addEventListener('turbolinks:load', () => {
  document.documentElement.classList.remove('turbolinks-loading')
})

内容的提问来源于stack exchange，提问作者Noble Eugene