In localhost waiting for the first byte takes about 5 seconds, for live environment it is 200% faster. In mobile version the DOM gets loaded in 0.5 seconds.
At the moment 5 seconds white screen is displayed, then 0.5 seconds loading image and then content. Is it possible to show the image full duration?
Effort: attempt 1
Using loader image that gets removed when JavaScript has been loaded.
CSS
<style type="text/css">
.overlay{
z-index:1;
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
background-color:rgb(255,255,255);
}
.overlay img{
position:absolute;
top: 50%;
left: 50%;
margin-top: -16px;
margin-left: -16px;
}
</style>
HTML
<div class="overlay" >
<img src="http://i.imgur.com/Z7IlELT.gif" alt="Loading">
</div>
JavaScript
<script type="text/javascript">
setTimeout(function (){
$(".overlay").remove();
}, 1000);
</script>
Sideeffects
- Loading image is displayed all time
- If javascript fails to load
- If javascript is turned off
- If there is a script bug
Effort: attempt 2
Using loader image with redirect.
<html><head><meta http-equiv="refresh" content="0;url=default.aspx" />
<style type="text/css">
.overlay{
z-index:1;
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
background-color:rgb(255,255,255);
}
.overlay img{
position:absolute;
top: 50%;
left: 50%;
margin-top: -16px;
margin-left: -16px;
}
</style></head><body><div class="overlay" >
<img src="http://i.imgur.com/Z7IlELT.gif" alt="Loading">
</div></body></html>