javascript - 一种在加载时淡入背景的方法？

Question

我正在做一个网站设计，我需要一种方法让 body 标签的背景图片在完全加载完成后淡入淡出(可能会暂停 500 毫秒)。

如果您看到 August的网站设计你会看到背景淡入；但是，这是通过 Flash 背景完成的。有什么方法可以用 jQuery 或 JavaScript 做到这一点吗？

---

2010 年 9 月 19 日更新:

所以对于那些来自谷歌的人(这是目前“加载时淡入背景”的第一结果，我只是想我会为大家做一个更清晰的实现示例。

添加 <div id="backgroundfade"></div>到页脚某处的代码(如果您不想让 DOM 变得困惑，也可以通过 JavaScript 附加它。

这样的风格 -

#backgroundfade {
  position: fixed;
  background: #FFF /* whatever color your background is */
  width: 100%;
  height: 100%;
  z-index: -2;
}

然后将其添加到您的 JavaScript 脚本文件(需要 jQuery):

$(document).ready(function() {
    $('#backgroundfade').fadeOut(1000);
});

这具有淡出 #backgroundfade 的效果元素(“覆盖”您实际背景的框)在 DOM 完成后 1 秒内输出。

Answer 1

是的:

不要为正文提供背景图片。然后准备一个带有淡入淡出效果的 GIF 动画。在 JavaScript 中:

document.onload = function () {
  window.setTimeout (function () {
    document.getElementsByTagName ("body")[0].style.backgroundImage = "url(/path/to/image.gif)";
  }, 500);
};

在 jQuery 中会是

$(function () {
  $('body').css ('backgroundImage', 'url(/path/...)');
});

如果您不想使用动画 GIF 技巧，但需要对 JPEG 或 PNG 的支持，那就太麻烦了。您必须创建一个占位符 <div/> , 将其定位到正确的位置并调整不透明度。您还必须检测背景图像何时加载，这样您就不会在慢速连接上愚蠢地跳转。一个无效的例子:

var x = new Image();
x.onload = function () {
  /*
    create div here and set it's background image to
    the same value as 'src' in the next line.
    Then, set div.style.opacity = 0; (best, when the
    div is created) and let it fade in (with jQuery
    or window.setInterval).
  */ };
x.src = "/path/to/img.jpg";

干杯，