我目前正在使用此脚本淡化页面转换:
$(document).ready(function() {
$(window).bind("unload", function() {});
$("body").css("display", "none");
$("body").hide();
$("body").fadeIn(2000);
$('a.fade1, a.fade2, a.fade3, a.fade4').click(function(event) {
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(700, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});?
当内容在缓存中有效时,这就像一个魅力,但是当一个图像需要加载时,它会暂时出现,然后被隐藏和淡入
所以我需要的是一种方法来隐藏内容,直到它完全加载,只有在它之后让它消失
希望有人可以帮助我,提前谢谢
Ste*_*fan 44
默认情况下使用CSS隐藏元素,然后在您喜欢时显示它.
CSS
body {
display: none;
}
jQuery的
$(window).load(function() {
// When the page has loaded
$("body").fadeIn(2000);
});
当load和所有子元素已完全加载时,load事件将发送到元素.
请参阅load事件.
您也可以考虑用单个类替换"fadeX"类,例如"淡入淡出"
小智 13
我实际上不会使用CSS开始,这就是原因.如果由于某种原因JS无法在页面上加载,它也将无法实际显示您的页面内容.我会将所有内容保存在脚本中并写入DOM,因此如果失败,则不会发生任何事情.
<script>
document.write('<style>body { visibility: hidden; } </style>');
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
delay();
});
function delay() {
var secs = 1000;
setTimeout('initFadeIn()', secs);
}
function initFadeIn() {
jQuery("body").css("visibility","visible");
jQuery("body").css("display","none");
jQuery("body").fadeIn(1200);
}
</script>
And*_*ong 12
为什么不使用... CSS的所有初始CSS？
<head>
<!-- some stuff of yours -->
<style>body{display:none}</style>
</head>
<body>
</body>
然后你的js只需要担心打电话fadeIn().这种方式当浏览器呈现<body>标记时,它已经知道要隐藏它,所以在你fadeIn()调用它之前它根本不会显示.
| 归档时间： |
|
| 查看次数： |
59114 次 |
| 最近记录： |