سؤال

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>
هل كانت مفيدة؟

المحلول 2

Effort: attempt 3

<meta name="apple-mobile-web-app-capable" content="yes"/>
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="gfx/***_57x57.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="gfx/***_114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="gfx/***_72x72.png">    
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="gfx/***_144x144.png">
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="gfx/***_60x60.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="gfx/***_120x120.png">
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="gfx/***_76x76.png">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="gfx/***_152x152.png">
<link rel="apple-touch-startup-image" href="gfx/mob_loading_***_320x460.png" sizes="320x460" media="(max-device-width: 480px) and not (-webkit-min-device-pixel-ratio: 2)"/>
<link rel="apple-touch-startup-image" href="gfx/mob_loading_***_640x920.png" sizes="640x920" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)"/>
<link rel="apple-touch-startup-image" href="gfx/mob_loading_***_768x1004.png" sizes="768x1004" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)"/>
<link rel="apple-touch-startup-image" href="gfx/mob_loading_***_1024x748.png" sizes="1024x748" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)"/>
<link rel="apple-touch-startup-image" href="gfx/mob_loading_***_1536x2008.png" sizes="1536x2008" media="screen and (min-device-width: 1025px) and (max-device-width: 2048px) and (orientation:portrait)"/>
<link rel="apple-touch-startup-image" href="gfx/mob_loading_***_2048x1496.png" sizes="2048x1496" media="screen and (min-device-width: 1025px) and (max-device-width: 2048px) and (orientation:landscape)"/>

نصائح أخرى

Try something like this. When your page fully downloaded, in 1-2 or 50 seconds it will remove the loading overlay.

In your html file

<body>
<img src="loading.gif" class="overlay" />
</body>

In your js file

$(document).ready(function(){
  $(".overlay").remove();
});
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top