Why is white page is loaded before my background-images in Laravel?

Question

I loaded background image in css for my web app, but problem is that before image is loaded it shows me first, elements of html code and white background ? Is this problem with Laravel or someone knows solution ? Also size of image is only

Example: 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 body {

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;
}

score 2 · Accepted Answer · answered Aug 30 '18 at 11:36

The reason you see a white background is because the browser has not yet loaded the image itself. This can be split into two separate states:

An initial/first visit will not have the background image cached locally, thus it will take some time for the browser to load it and about 250KB background is not a small image. Try optimizing it a bit.

and

A subsequent visit will not have your background image loaded, until all items in your head section are loaded and as far as I can see, you have put all of your javascript code there.

I would recommend you to move your JS to the bottom of the page, so it would load these items last.

Also, if you would like to have absolutely no blank background displayed, consider using an image pre-loader. There is already a SO thread about preloading content here:

JavaScript Preloading Images

Why is white page is loaded before my background-images in Laravel?

1 Answers1