Laravel:样式在元素加载时导致页面丑陋之前没有完全加载

问题描述 投票:0回答:1

[UPDATE]

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


我在我的项目中使用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。为什么会发生这种情况以及如何解决?

css laravel pageload
1个回答
0
投票

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

例如,代替此:

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

您应该这样做:

{{ asset('js/jquery-2.2.4.min.js') }}
© www.soinside.com 2019 - 2024. All rights reserved.