I have not found much about this subject in tutorials, I do not know if anyone else has noticed that services like Facebook, Netflix use a kind of load before showing the content, both seem to work the same way, in some tutorials said that this is done with the ".load" function of jQuery, but the same applies to texts like facebook uses? Here are examples of the two services: Facebook: link Netflix: link
What kind of function is used to do this? It makes loading the site look so much better.
When we analyze what happens with Facebook, we can see that it has a fixed HTML of the page, and continues loading the other items via requests to the server.
The image below shows some of what is loaded:
Tobetterunderstand,pressESCwhenyouopenthepage.Youwillcanceltherequisitionsandthelayoutwillnotgraduate.
Aswellshownby @inkeliz in the comments, the default layout of Facebook is easy to assemble just with Html + css, as this link shows (not identical, but to understand).
Below I will show a practical example of how to do this (without the request on the server, of course).
$(document).ready(function() {
setInterval(function() {
AlteraTimeline();
}, 3000);
});
function AlteraTimeline() {
$('#timeline').hide();
$('body').append('<img src="http://www.creativebeacon.com/wp-content/uploads/2013/08/free-facebook-timeline-psd-2.jpg"/>');}.background-masker {
background: #fff;
position: absolute;
}
/* Every thing below this is just positioning */
.background-masker.header-top,
.background-masker.header-bottom,
.background-masker.subheader-bottom {
top: 0;
left: 40px;
right: 0;
height: 10px;
}
.background-masker.header-left,
.background-masker.subheader-left,
.background-masker.header-right,
.background-masker.subheader-right {
top: 10px;
left: 40px;
height: 8px;
width: 10px;
}
.background-masker.header-bottom {
top: 18px;
height: 6px;
}
.background-masker.subheader-left,
.background-masker.subheader-right {
top: 24px;
height: 6px;
}
.background-masker.header-right,
.background-masker.subheader-right {
width: auto;
left: 300px;
right: 0;
}
.background-masker.subheader-right {
left: 230px;
}
.background-masker.subheader-bottom {
top: 30px;
height: 10px;
}
.background-masker.content-top,
.background-masker.content-second-line,
.background-masker.content-third-line,
.background-masker.content-second-end,
.background-masker.content-third-end,
.background-masker.content-first-end {
top: 40px;
left: 0;
right: 0;
height: 6px;
}
.background-masker.content-top {
height: 20px;
}
.background-masker.content-first-end,
.background-masker.content-second-end,
.background-masker.content-third-end {
width: auto;
left: 380px;
right: 0;
top: 60px;
height: 8px;
}
.background-masker.content-second-line {
top: 68px;
}
.background-masker.content-second-end {
left: 420px;
top: 74px;
}
.background-masker.content-third-line {
top: 82px;
}
.background-masker.content-third-end {
left: 300px;
top: 88px;
}
@keyframes placeHolderShimmer {
0% {
background-position: -468px 0
}
100% {
background-position: 468px 0
}
}
.animated-background {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeHolderShimmer;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 104px;
height: 96px;
position: relative;
}
.timeline-item {
background: #fff;
border: 1px solid;
border-color: #e5e6e9 #dfe0e4 #d0d1d5;
border-radius: 3px;
padding: 12px;
margin: 0 auto;
max-width: 472px;
min-height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="timeline-wrapper" id="timeline">
<div class="timeline-item">
<div class="animated-background">
<div class="background-masker header-top"></div>
<div class="background-masker header-left"></div>
<div class="background-masker header-right"></div>
<div class="background-masker header-bottom"></div>
<div class="background-masker subheader-left"></div>
<div class="background-masker subheader-right"></div>
<div class="background-masker subheader-bottom"></div>
<div class="background-masker content-top"></div>
<div class="background-masker content-first-end"></div>
<div class="background-masker content-second-line"></div>
<div class="background-masker content-second-end"></div>
<div class="background-masker content-third-line"></div>
<div class="background-masker content-third-end"></div>
</div>
</div>
</div>In this example I have the Facebook layout mentioned above, and a function to change the layout for an image. This function has a time of 3 seconds, just to give more reality to the example.
One approach you can use is:
Have a div working as a full page overlay displaying a loading gif.
<body>
<div class="loading"></div>
[restante da pagina]
</body>
With the help of jquery, you can create a listener for the onload event, when the event occurs you may disappear with the loading div
$(document).ready(function(){
// windows load
$(window).on('load', function() {
setTimeout(function(){
$('.loading').removeClass('active');
}, 300);
});
});