Doesn't see the CSS on first enter in my codes

Question

I am using Laravel php. Head and Footer tags are in my app.blade file.But it doesn't run the preloader in the head tag when it's first opened. It also doesn't load the css file. It comes after 1-2 seconds exactly. It's too fast to take a screenshot, so I uploaded it as a video. I will add the lines of code below along with the video.

https://youtu.be/ihHmQBsSpNs

app.blade.php header codes:

@if(!isset($lang)) @php($lang = 'tr') @endif
@php($slug = Request::segment(1))
<!DOCTYPE html>
<html lang="tr">
<head>  
<title>NovaPia Clinic</title>
<meta charset="UTF-8">
<meta name="description" content="NovaPia Clinic">
<meta name="keywords" content="Dentist, Clinic">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  
 
    <!-- Stylesheets -->
    <link rel="stylesheet" href="{{ asset('theme/css/style.css')}}"/>
    <link rel="stylesheet" href="{{ asset('theme/css/responsive.css')}}"/>
    <link rel="stylesheet" href="{{ asset('theme/css/animate.css')}}"/>
    

    <link rel="shortcut icon" href="{{ asset('theme/img/favico.png')}}">    


    <link rel="stylesheet" href="{{ asset('theme/icon-fonts/fontawesome-5.0.6/css/fontawesome-all.min.css')}}"/>
    <link rel="stylesheet" href="{{ asset('theme/icon-fonts/flaticon/flaticon.css')}}"/>
    <link rel="stylesheet" href="{{ asset('theme/icon-fonts/flaticon/flaticon.svg')}}"/>
    <link rel="stylesheet" href="{{ asset('theme/icon-fonts/flaticon/flaticon.ttf')}}"/>
    <script src="https://kit.fontawesome.com/40e15e0d0d.js" crossorigin="anonymous"></script>


    <link rel="stylesheet" href="{{ asset('theme/font/stylesheet.css')}}"/>
   

</head> 
<body> 


<div id="preloader">
  <div class="loading-area">
    <div class="logo" style=""><img src="{{ asset('theme/img/nova.png')}}" alt=""></div>
    <span>yükleniyor...</span>
  </div>
  <div class="left-side"></div>
  <div class="right-side"></div>
</div>

<div class="page-overlay">
    <div class="page-transition"></div>
  </div>
<main>


  
  <header class="whitev">
 
    <a href="index.html" class="logo" data-type="ajax-load">
      <img src="{{ asset('img/nova.svg')}}" alt="">
    </a>

    <div class="nav-icon">
      <span></span>
      <span></span>
      <span></span>
      </div>
  </header>```

in inspect see Network tab and refresh do you see error or warning ? — hashem sheikhypour, Jun 28 '22 at 08:37
Similar question: https://stackoverflow.com/questions/3221561/eliminate-flash-of-unstyled-content. Your problem is, the CSS take time to load, but your contents are already showing. Try to reduce the size of CSS as well as applying the preloader correctly (hide the contents first). What are the contents of the `#preloader` CSS? — Raptor, Jun 28 '22 at 08:40
Moreover, you can move all the JavaScript to the end of the body. — Raptor, Jun 28 '22 at 08:42
@Raptor I tried now but the same problem still persists. I tried the script tags in the FOUC methods and it's still the same. — canswartz, Jun 28 '22 at 08:49

score 0 · Accepted Answer · answered Jun 28 '22 at 08:48

0

You must add display:none in the body, and add a setTimeout to change the display value to block after 5 seconds for example, like that :

<body style="display:none" id="body_id">

<script>setTimeout(() => { document.getElementById('body_id').style.display = 'block'; }, "5000");</script>

answered Jun 28 '22 at 08:48

oussama zaqouri

174
1
9

1

Don't use a meaningless fixed time. You can always detect whether the contents are loaded or not using JavaScript. – Raptor Jun 28 '22 at 08:56
@Raptor yes you right – oussama zaqouri Jun 28 '22 at 08:59
That solve but i have i small problem. [I add your code but it looks like this](https://imgur.com/a/YC2v5uW)
[normally it should be like this](https://imgur.com/a/zphxh3s). Below is the line of code I added. ` – canswartz Jun 28 '22 at 09:02
@canswartz the picture link is wrong – oussama zaqouri Jun 28 '22 at 09:05

Doesn't see the CSS on first enter in my codes

1 Answers1