Ema*_*ail 33 javascript jquery document-ready
我有一个大量使用jQuery的网页.
我的目标是只在一切准备就绪时显示页面.
有了这个我想避免向用户显示恼人的页面呈现.
到目前为止我试过这个(#body_holder是体内的包装):
$(function(){
$('#body_holder').hide();
});
$(window).load(function() {
$("#body_holder").show();
});
这完全没问题,但弄乱了布局.
问题是隐藏包装器会干扰其他jQuery函数和使用的插件(例如layout-plugin).
所以我想必须有另一个技巧来做到这一点.在发生window.load之前,可能会在身体上放置一张图片或div？
你用什么方法？
编辑:
该解决方案最有可能有别的办法比display:none或hide();
ade*_*neo 46
使用jQuery做的任何事情通常都要等到document.ready,这已经太晚了恕我直言.
将div放在顶部,如下所示:
<div id="cover"></div>
设置一些样式:
#cover {position: fixed; height: 100%; width: 100%; top:0; left: 0; background: #000; z-index:9999;}
并在加载所有元素时用JS隐藏它:
$(window).on('load', function() {
$("#cover").hide();
});
或者,如果由于某种原因你的脚本使用更长的时间然后加载DOM元素,设置一个间隔来检查加载最慢的某个函数的类型,并在定义所有函数时删除封面!
$(window).on('load', function() {
$("#cover").fadeOut(200);
});
//stackoverflow does not fire the window onload properly, substituted with fake load
function newW()
{
$(window).load();
}
setTimeout(newW, 1000);#cover {position: fixed; height: 100%; width: 100%; top:0; left: 0; background: #000; z-index:9999;
font-size: 60px; text-align: center; padding-top: 200px; color: #fff;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>This</li>
<li>is</li>
<li>a</li>
<li>simple</li>
<li>test</li>
<li>of</li>
<li>a</li>
<li>cover</li>
</ul>
<div id="cover">LOADING</div>haw*_*126 28
这是一个jQuery解决方案,适合那些寻找:
使用css隐藏正文,然后在加载页面后显示它:
CSS:
html { visibility:hidden; }
JavaScript的
$(document).ready(function() {
document.getElementsByTagName("html")[0].style.visibility = "visible";
});
当页面加载时,页面将从空白变为显示所有内容,没有内容闪烁,没有观看图像加载等.
Igo*_*mić 25
您应该尝试将可见性设置为隐藏而不是display:none.将可见性设置为隐藏将保留所有元素位置和尺寸,因此不应创建布局问题.
小智 6
开始你的 HTML：
<body style="opacity:0;">
在脚本的末尾：
document.body.style.opacity = 1;
| 归档时间： |
|
| 查看次数： |
69652 次 |
| 最近记录： |