Question

[更新]

请不要将这些元素中的大多数从缓存中加载，因此不需要连接到数据库，这意味着数据库或服务器没有延迟。

我在项目中使用Laravel，这是主要的头代码

<!DOCTYPE html>
<html lang="{{ $lang }}" dir="@if($lang == 'ar') rtl @else ltr @endif">
  <head>
    <meta charset="utf-8">
    <meta name="_token" id="main_token" content="{{ csrf_token() }}">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <script src="<?=config("app.public_path")?>js/jquery-2.2.4.min.js"></script>
    <script src="<?=config("app.public_path")?>js/bootstrap.3.4.min.js"></script>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <script src="<?=config("app.public_path")?>js/modernizr-2.7.1.min.js"></script>

    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="<?=config("app.public_path")?>bootstrap/css/bootstrap.min.css">
    @if($lang == 'ar') <link rel="stylesheet" href="<?=config("app.public_path")?>css/bootstrap-rtl.css"> @endif
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
    <link rel="stylesheet" type="text/css" href="<?=config("app.public_path")?>css/style_{{$lang}}.css">

和配置公共路径

'public_path' => 'http://www.example.com/public/',

元素以错误的大小加载到错误的位置，然后在几秒钟内加载样式表，元素也被正确放置并调整大小，这使得页面在开始时看起来很丑，我说的是CSS，而不是javascript或jQuery。为什么会发生这种情况以及如何解决？

Answer 1

您应该使用asset函数而不是PHP速记回显标记和配置路径。

例如，代替此：

<?=config("app.public_path")?>js/jquery-2.2.4.min.js

您应该这样做：

{{ asset('js/jquery-2.2.4.min.js') }}

另外，请考虑将defer用于脚本，例如：

<script src="{{ asset('js/jquery-2.2.4.min.js') }}" defer></script>

Laravel：样式在元素加载前未完全加载之前导致页面丑陋

1 个答案: