html - 为什么在 Laravel 中的背景图像之前加载白页?
问题描述
我在我的网络应用程序的 css 中加载了背景图像,但问题是在加载图像之前它首先显示我,html 代码和白色背景的元素?这是 Laravel 的问题还是有人知道解决方案?图像的大小也只有
示例:http: //559c8451.ngrok.io/login 267Kb,
app.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Master thesis application</title>
<!-- Jquery -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
</script>
<link rel="stylesheet" type="text/css" href="https://getbootstrap.com/docs/3.3/examples/jumbotron-narrow/">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<!-- Import css file-->
<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
<!-- Highcharts for normal chart
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
-->
<!-- Highcharts for normal tockSchart -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
</head>
<script type="text/javascript">
</script>
<body>
@include('file.hed')
@include('file.bar')
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
<div class="container">
@include('file._info')
@yield('main')
</div> <!-- /container -->
@include('file.down')
</body>
</html>
app.css 正文 {
background: url(/images/images.jpeg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.container {
max-width: 940px;
}
#header{
height: 120px;
background-color: #007ab3;
padding: 20px;
padding-left: 100px;
}
.navbar {
position: relative;
min-height: 30px;
margin-bottom: 20px;
border: 1px solid transparent;
z-index: 1;
border-radius: 0;
}
.navbar-inverse{
background-color: #004666;
}
@media (min-width: 768px){
.navbar-nav>li>a {
padding-top: 0px;
padding-bottom: 0px;
}}
.navbar-nav>li>a {
padding-top: 0px;
padding-bottom: 0px;
}
.nav>li>a {
padding: 0px;
padding-left: 10px;
padding-right:10px;
color: white;
padding-top: 3px;
font-weight: 500;
font-size: 1.2em;
}
.navbar-inverse .navbar-nav>li>a {
color: white;
}
.tablica{
float:left;
}
td{
text-align: center;
width: 10%;
}
th{
font-size: 10px;
}
.table {
width: 90%;
}
.navbar-toggle {
position: relative;
float: right;
padding: 5px 5px;
margin-top: 2px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.container>.navbar-header, .container-fluid>.navbar-header, .container>.navbar-collapse, .container-fluid>.navbar-collapse {
background-color: #004666;
margin-right: -15px;
margin-left: -15px;
position: relative;
float: none;
}
th{
text-align: center;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 60px;
}
解决方案
您看到白色背景的原因是浏览器尚未加载图像本身。这可以分为两种不同的状态:
- 初始/首次访问不会在本地缓存背景图像,因此浏览器加载它需要一些时间,并且大约 250KB 的背景不是一个小图像。尝试优化一下。
和
- 后续访问将不会加载您的背景图像,直到您的 head 部分中的所有项目都已加载并且据我所知,您已将所有 javascript 代码放在那里。
我建议您将 JS 移动到页面底部,以便最后加载这些项目。
此外,如果您希望绝对不显示空白背景,请考虑使用图像预加载器。这里已经有一个关于预加载内容的 SO 线程:
推荐阅读
- c# - 是否可以在 winforms 应用程序中使用 c# 从文件中提取元数据?
- javascript - 使用 javascript 复制永久链接
- javascript - 触摸移动不滑动滑动滑块上的多个元素
- node.js - Puppeteer 似乎不适用于 docker
- java - 如何从 ble 设备 android 读取数据?
- python - 避免 for 循环在 3d 数组上运行线性回归
- angular - 有没有办法将ppt嵌入角度并通过办公室查看?
- linear-programming - 如何在 GuRoBi 中检查 LP 的解是否为二进制
- node.js - 获取嵌套字段 ElasticSearch 中的最后一项
- cassandra - 事物板卡桑德拉兼容性