Ahm*_*uad 16 javascript php ajax jquery preloader
是否可以预加载所有页面内容(如显示加载栏/动画gif ..或加载文本..),直到内容完全加载,然后显示给用户/访问者？如果可以的话,您能否给我正确的指示或资源来实现这一目标.因为我能够轻松找到图像预加载器,但我正在寻找一种预加载技术,它将在显示之前预先加载页面上的所有内容.
sep*_*ehr 17
没有必要使用Ajax.只需将页面的包装器div设置display为none.然后将其更改为加载文档block时.
使用vanilla javascript,您的代码可能如下所示:
<script type="text/javascript">
function preloader() {
document.getElementById("preloader").style.display = "none";
document.getElementById("container").style.display = "block";
}
window.onload = preloader;
</script>
<style>
div#wrapper {
display: none;
}
div#preloader {
top: 0; right: 10px;
position:absolute;
z-index:1000;
width: 132px; height: 38px;
background: url(path/to/preloaderBg.png) no-repeat;
cursor: wait;
text-shadow: 0px 1px 0px #fefefe; //webkit
}
</style>
<body>
<div id="preloader">Loading... Please Wait.</div>
<div id="wrapper">
<!-- page contents goes here -->
</div>
</body>
在jQuery中更新:
<script type="text/javascript">
// Use $(window).load(fn) if you need to load "all" page content including images, frames, etc.
$(document).ready(function(){
$("#preloader").hide();
$("#container").show();
});
</script>
相关文档:事件/ 准备,事件/ 加载,CSS/css和核心/ $
bob*_*nce 11
如果您选择隐藏内容直到整个页面加载的方法,请不要将其隐藏在CSS中,然后在JavaScript中取消隐藏.如果您这样做,任何禁用或禁用JavaScript的人都将完全没有页面.相反,从脚本中执行隐藏和显示.
<body>
<script type="text/javascript">
document.body.style.visibility= 'hidden';
window.onload= function() { document.body.style.visibility= 'visible'; };
</script>
另请注意,术语"预加载器"并不适合您在此处所做的事情.'pre'意味着您通过提取和缓存页面来提高性能,以便在需要时准备好.
但事实恰恰相反:当部分内容可用时,它会在页面加载时等待显示用户没有任何内容,从而降低性能.击败渐进式渲染会使浏览速度变慢,而不是更快.它通常明显是错误的东西,除了在一些利基案例与普通浏览器渐进式渲染是最好的.这就是网络的运作方式; 人们已经习惯了.
(人们,除了那些愚蠢的管理类型,他们并不真正使用或理解网络,但要求他们公司的网站同时出现.)
| 归档时间： |
|
| 查看次数： |
27825 次 |
| 最近记录： |