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

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>

我怀疑我需要以某种方式在 Function fade 中添加延迟，因为 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 使用超过 50% 的人使用网络浏览器。