Question

我正在寻找一个慢慢淡入的网站来隐藏图像的加载。现在我已经设法获得了一些淡入淡出的javascript，但它在页面加载时立即启动，因此您在加载页面时仍然会看到加载的各个元素。

我想做的是在开始淡入之前添加一秒左右的延迟。

以下是我现在所拥有的：

<style>fadein{filter:alpha(opacity=0);opacity:0}</style>

<script>

function fadein(){var fade=0, fadein=document.getElementById("index-wrappper").style,ms=(fadein.opacity==0)?0:1, pace=setInterval(Fade,20);

function Fade() {if(fade<100){fade+=1;if(ms)fadein.filter="alpha(opacity="+fade+")";else fadein.opacity=(fade/100)} else clearInterval(pace)}};

window.onload=fadein;

</script>

我怀疑我需要在某种程度上添加函数淡入淡出的延迟，因为Fadein是在加载时将div的不透明度设置为0的原因。

但究竟我需要放在那里？我有微不足道的javascript知识（我真的需要刷新），非常感谢任何帮助。

Answer 1

首先，Javascript不是Java。

您的问题的一个简单答案是：使用setTimeout和clearTimeout。

但坦率地说，我会敦促你不要重新发明轮子，但要使用像jQuery这样的库，这些库可以使这些操作更容易并支持所有主流浏览器。在jQuery中你可以简单地写

$(document).ready(function() {
    $("#index-wrapper").delay(1000).fadeIn('fast');
});

Answer 2

试试这个：

window.onload = function() {
    window.setTimeout(function() {
        fadein();
    },1000); // 1 sec
}

这会在页面加载后延迟淡入1秒。

Answer 3

window.onload=setTimeout("fadein()",1000);

应该这样做。

Answer 4

您是否考虑过使用jQuery库？

它是免费的，易于使用，完全符合您的要求，并且跨浏览器兼容。许多网站（包括这个网站）使用它，所以如果你无法做到你想做的事情，你将能够获得帮助。

请注意，您问题中发布的脚本仅适用于Internet Explorer，由less than 50%人用作网络浏览器。

在javascript函数中添加时间延迟以实现淡入效果

4 个答案: