Hello Guys I have an issue with the content loading of my webpage. I see the textfields and images laoding before the preloader sequence is starting.
This is my basic html structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<title>Barcamp22</title>
</head>
<body>
<script>
$(window).on('load',function(){
$('.load-wrapper').fadeOut(1000);
$('.content').show();
})
</script>
<div class="load-wrapper">
<div class="loader"></div>
</div>
<div class="content">
<div class="slider">
<div class="sliderTrack">
<div class="slider-item">
<img src="./public/aula1.jpg">
</div>
<div class="slider-item">
<img src="./public/big_session.jpg">
</div>
<div class="slider-item">
<img src="./public/blockchain_session.jpg">
</div>
<div class="slider-item">
<img src="./public/cake.jpg">
</div>
<div class="slider-item">
<img src="./public/chris.jpg">
</div>
<div class="slider-item">
<img src="./public/day2_start.jpg">
</div>
<div class="slider-item">
<img src="./public/holzkette_session.jpg">
</div>
<div class="slider-item">
<img src="./public/me.jpg">
</div>
<div class="slider-item">
<img src="./public/outside.jpg">
</div>
<div class="slider-item">
<img src="./public/robot.jpg">
</div>
<div class="slider-item">
<img src="./public/session1.jpg">
</div>
<div class="slider-item">
<img src="./public/session_plan.jpg">
</div>
<div class="slider-item">
<img src="./public/session_plannings.jpg">
</div>
<div class="slider-item">
<img src="./public/sweet.jpg">
</div>
<div class="slider-item">
<img src="./public/VR.jpg">
</div>
</div>
</div>
<blockquote>
<p>Das Barcamp 2022, eine Veranstaltung auf der gelernt, connected und gefeiert wurde</p>
</blockquote>
<section>
<h2> Veranstalter</h2>
<p>
Eine Herzliche Begrüßung mit allerlei leckereien und Getränken, gefolgt von einer Vorstellungsrunde, die Christoph super umgesetzt hat. Es wurden Sessions geplant, in denen die Teilnehmer sich über aktuelle Themen der Holz- und Digitalbranche austauschen konnten. Jeder hatte dadurch die Chance nicht nur neues lernen zu können
und Interessante Möglichkeiten zu Konzepten auszuarbeiten, sondern auch die Themen die einem selbst am wichtigsten sind mit einzubringen. In meinem Fall war das die Blockchain. Insgesamt wurde durch die Veranstalter eine Atmosphäre geschaffen, in der sich jeder beteiligen und man dadurch gemeinsam kreativ werden konnte.
</p>
...
</section>
</div>
<div>
<script type="module" src="/main.js"></script>
</div>
</body>
</html>
In my css file I used this line to hide the content
.content
{
display: none;
}
I really can't figure out why I see the text and images without styling properties for like one or two seconds before the preloader is shown, would be very helpful if someone has an idea.
This is the loading flow of my page:
I think these codes could help you solve the problem:
Because I don't have your styles, I could not say that it definitely makes your goal. The fadeOut method have a second parameter that you can define a function in that. This function is called after the fade-out effect completely finished.