css - Laravel:在加载时导致页面丑陋的元素之前未完全加载样式

标签 css laravel pageload

[更新]

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


我在我的元素中使用 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)路径

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

元素以错误的大小加载到错误的位置,然后在几秒钟内加载样式表并且元素被正确定位并调整大小,这使得页面在开始时看起来很难看,我说的是 css 而不是 javascript 或 jQuery。为什么会出现这种情况,如何解决?

最佳答案

您应该使用 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>

关于css - Laravel:在加载时导致页面丑陋的元素之前未完全加载样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59230327/

相关文章:

javascript - 在 Django 中创建一个带有更新和删除按钮的表单

CSS3 菜单和选择菜单 - 在 IE 和 Firefox 中不起作用

php - Eloquent ORM Laravel 的非主键但自动递增 id

php - Laravel ORM 从自引用表中获取 N 级层次结构 JSON

css - 菜单布局改变,初始加载时垂直而不是水平

javascript - 我的初始页面加载布局阶段花费了超过 2 秒

html - CSS布局,页脚在内容的中间

javascript - jquery 字幕在翻转时覆盖阴影

laravel - 使用 Slack Channel 自定义 Laravel Log 的消息

click - 在继续之前,如何等待phantomjs中的click()事件加载?