gpt4 book ai didi

javascript - site.master 告诉页面等待加载...但是网站仍然出现?

转载 作者:行者123 更新时间:2023-11-30 17:35:11 25 4
gpt4 key购买 nike

除了不被“推荐”之外,我们还需要为特定项目执行此操作。基本上我有一个站点母版页,它显示“加载时请稍候...” div 以在加载页面之前不显示该页面。原因是我们有许多加载速度很慢的第 3 方工具。

无论如何我们有这样的效果:

<script type="text/javascript">
$("#msg").show();
$('#pageBody').css('opacity', 0);
$(window).load(function () {
$("#msg").hide();
$('#pageBody').css('opacity', 1);
});
</script>

我们还设置了一个超时,以防某些内容未加载,我们希望页面返回...

setTimeout('$("#pageBody").css("透明度", 1)', 1000);

html 就像这个片段一样简单:

<body id="pageContainer">
<div id="msg" style="text-align:center;font-weight: bold;">
Loading, please wait...<br/>
<img src="/Images/ajax-loader.gif" alt="Loading please wait..."/>
</div>
<div id="pageBody">
</div>
</body>

div id=pageBody 是我所有使用此站点主控的 .aspx 页面的容器。问题是当我转到这些页面之一时,似乎我看到了 loading please wait... 但我仍然看到该页面,比如 1/2 秒,然后它消失了并满载返回..它对用户来说有点明显,所以体验不是很好。

我不是真正的前端开发人员,所以我不确定我是否做错了什么。我是否应该转到我的 .aspx 页面并在那里的 jquery 中做任何事情...我假设 site.master 会处理所有事情。

最佳答案

#msg 元素(display: block)和 #pageBody 元素(opacity: 0),而不是运行 $("#msg").show(); $('#pageBody').css('不透明度', 0);.然后,您只需要 $(window).load 处理程序。

这样,默认情况下,正确的东西会在页面呈现时隐藏/显示,只有当你想隐藏/显示东西时($(window).load)它们才会正确。

下面是我的设置方式(当然,其中一些是为了演示):

HTML -

<div id="msg">
Loading, please wait...
</div>
<div id="pageBody">
<div>HERE'S</div>
<div>SOME</div>
<div>CONTENT</div>
</div>

CSS -

#msg {
text-align: center;
font-weight: bold;
display: block;
}

#pageBody {
opacity: 0;
}

JS-

$(document).ready(function () {
// Simulate some time before everything's loaded
setTimeout(function () {
$("#msg").fadeOut(function () {
// Wait for #msg to fade out before fading in #pageBody
$("#pageBody").animate({
opacity: "1.0"
}, 800);
});
}, 1500);
});

演示: http://jsfiddle.net/X7nBN/

关于javascript - site.master 告诉页面等待加载...但是网站仍然出现?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22205906/

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