gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 11:06:24 27 4
gpt4 key购买 nike

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

最佳答案

尝试这样的事情。当您的页面完全下载后,它会在 1-2 秒或 50 秒内移除加载叠加层。

在你的 html 文件中

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

在你的js文件中

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

关于jquery - 加载时显示页面移动版本的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22229374/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com