努力：尝试1

Question

在localhost中等待第一个字节需要大约5秒，对于实时环境，它要快200％。在移动版本中，DOM在0.5秒内加载。

此时显示5秒白色屏幕，然后0.5秒加载图像然后内容。是否可以显示图像的完整持续时间？

努力：尝试1

使用加载JavaScript时删除的加载程序映像。

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>

副作用

始终显示加载图像
- 如果javascript无法加载
- 如果关闭javascript
- 如果有脚本错误

努力：尝试2

使用带有重定向的装载程序图像。

<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>

Answer 1

尝试这样的事情。当您的页面完全下载后，在1-2或50秒内将删除加载覆盖。

在你的html文件中

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

在你的js文件中

$(document).ready(function(){
  $(".overlay").remove();
});

Answer 2

努力：尝试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)"/>

在加载时显示页面的移动版本的图像

努力：尝试1

努力：尝试2

2 个答案:

努力：尝试3