[更新]
请注意,大多数这些元素都是从缓存中加载的,因此无需连接到数据库,这意味着它不是数据库或服务器延迟。
我在我的元素中使用 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/