时间戳

首页 > 解决方案 > Turbolinks 在 css/图像之前加载内容

javascript - Turbolinks 在 css/图像之前加载内容

问题描述

我在我的 laravel 应用程序中使用 Turbolinks，我现在遇到的问题是当我切换视图时，内容在 CSS 和图像之前加载，并且在快速切换到全视图之前会导致 HTML 的尴尬显示，这对用户体验。我该如何解决这个问题，可能是通过确保 turbolinks 仅在它首先加载所有 CSS 和图像后才切换？

====编辑====

我已经能够发现这么多

我们从那里路由到登录页面：

@extends('./layouts/base')
@section('meta')
@section('title', 'Become a Tuper Seller')
  <link rel = "stylesheet" href = " {{ asset('fonts/material-icon/css/material-design-iconic-font.min.css')}} "> 
@endsection
@section('body')
<link rel = "stylesheet" href = " {{ mix('css/auth.css')}} ">
    <div class = "auth-form">
     <div class="main">

        <!-- Sign up form -->
        <section class="signup">
            <div class="container">
                <div class="signup-content">
                    <div class="signup-form">
                        <h2 class="form-title">Create A Consumer Account</h2>
                        <form method="POST" class="register-form" id="register-form">
                        @csrf
                            <div class="form-group">
                                <label for="username"><i class="zmdi zmdi-account material-icons-name"></i></label>
                                <input type="text" name="username" id="name" placeholder="Your Name" value = "{{ old('username')}}"/>
                            </div>
                            @error("username")
                                <div class = "alert alert-danger"> {{ $message }}</div>
                            @enderror
                            <div class="form-group">
                                <label for="email"><i class="zmdi zmdi-email"></i></label>
                                <input type="email" name="email" value = "{{ old('email')}}" id="email" placeholder="Your Email"/>
                            </div>
                            @error('email')
                                <div class = "alert alert-danger"> {{ $message }}</div>
                            @enderror
                             <div class="form-group">
                                <label for="telephone"><i class="zmdi zmdi-phone"></i></label>
                                <input type="number" value = "{{ old('telephone') }}"name="telephone" id="telephone" placeholder="Telephone"/>
                            </div>
                            @error("telephone")
                                <div class = "alert alert-danger"> {{ $message }}</div>
                            @enderror
                            <div class="form-group">
                                <label for="password"><i class="zmdi zmdi-lock"></i></label>
                                <input type="password" name="password" value = "{{ old('password') }}"id="pass" placeholder="Password"/>
                            </div>
                            @error('password')
                                <div class = "alert alert-danger"> {{ $message }}</div>
                            @enderror
                            <div class="form-group">
                                <label for="password_confirmation"><i class="zmdi zmdi-lock-outline"></i></label>
                                <input type="password" value = "{{ old('password_confirmation')}}" name="password_confirmation" id="re_pass" placeholder="Repeat your password"/>
                            </div>
                            <div class="form-group">
                                <input type="checkbox" name="agree-term" id="agree-term" class="agree-term" />
                                <label for="agree-term" class="label-agree-term"><span><span></span></span>I agree all statements in  <a href="#" class="term-service">Terms of service</a></label>
                            </div>
                            <div class="form-group form-button">
                                <input type="submit" name="signup" id="signup" class="form-submit" value="Register"/>
                            </div>
                        </form>
                    </div>
                    <div class="signup-image">
                        <figure><img src=" {{ asset('img/tuper_logo.jpg')}} " alt="sing up image"></figure>
                        <a href=" {{ route('seller_register')}} " class="signup-image-link">I want to be a seller</a>
                    </div>
                </div>
            </div>
        </section>

        <!-- Sing in  Form -->
    </div>
</div>
@endsection

我注意到用内联样式标签替换登录页面中的 mix(auth.css) 并粘贴混合文件可修复此错误，但这不是实现此目的的合适方法。

标签： javascriptruby-on-railslaravelturbolinks

解决方案

好吧，我找到了一个非常简洁的解决方案。由于css延迟是由链接标签引起的，并且当我将所需的css粘贴到样式标签中时效果很好，我可以用链接标签替换

<style>
{{  file_get_contents(asset('css/auth.css'))}}
</style>

这样，它将css作为内容转储而不是超引用它，从而消除了愚蠢的延迟。如果由于缓存散列在 webpack.mix.js 中设置了 mix.version()，混合助手也不会在这里工作。但我不认为这将是一个问题，因为不会有 css 的缓存。

推荐阅读