Question

我正在进行网站设计，我需要一种方法来淡化身体标记的背景图像，当它完全加载时（可能是500毫秒的暂停）。

如果您看到August的网站设计，您会看到背景淡入;但是，这是通过Flash背景完成的。有没有办法用jQuery或JavaScript做到这一点？

2010年9月19日更新：

因此对于那些来自Google的人来说（这是目前“负载背景淡出”的头号结果），我只是想为每个人制作一个更清晰的实施示例。

在页脚中的某个位置添加<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);
});

这会在DOM完成后1秒内淡化#backgroundfade元素（覆盖“实际背景”的框）。

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";

干杯，

Answer 2

我自己没有这样做，但它可能有用。

我猜，你可以设置背景图像，然后用一个黑色背景的大旧div来掩盖它。然后使用此div的不透明度来创建淡入淡出效果。这个黑色的div必须覆盖整个身体。

Answer 3

我不确定是否有办法让背景图像淡入，但是你能做到的一种方法是使用带有负z-index的绝对定位图像。然后，您可以使用jquery淡入图像。如果您需要背景图像来平铺或重复，这种方法可能会更棘手。

HTML：

<body style="z-index: -2">
<img src="backgroundImage.jpg" id="backgroundImage" style="position: absolute; top: 0px; left: 0px; z-index: -1; display: none;">
<!-- The rest of your HTML here -->
</body>

jQuery：

$(window).load(function() {

    $("#backgroundImage").fadeIn("slow");
});

Answer 4

我看到了这个链接，

http://fragged.org/dev/changing-and-fading-body-background-image.php

这个想法是：

将背景应用于分配了低z-index，绝对定位和背景的div（将其视为反向/反向模式）。然后用透明的背景将你的内容制作成另一层......

您现在可以通过id引用底层并更改不透明度。

它需要的是一个背景图像的堆栈/数组，作为属性应用于图层...

Answer 5

为什么不使用现成的脚本：this one在页面加载时使背景图像淡入。

它还使图像适合窗口的尺寸，但如果不需要，可以禁用它。

Answer 6

我的解决方案：

HTML：

<img id='myImg' />

CSS：

#myImg{
    opacity: 0;              
    -moz-opacity: 0;         
    -khtml-opacity: 0;       
    filter: alpha(opacity=0); 
}

JS：

var img = document.getElementById('myImg'),
    steps = 30,
    appearTime = 1000;

img.src = "/path/to/img.gif";

img.onload = function(){
    for(i=0; i<=1; i+=(1/steps)){
        setTimeout((function(x){
            return function(){
                img.style.opacity = x;
                img.style.MozOpacity = x;
                img.style.KhtmlOpacity = x;
                img.style.filter = "alpha(opacity=" + (x*100) + ")";                    
            };
        })(i), i*appearTime);

    };
};

一种在负载下淡入背景的方法？

6 个答案: