加载时淡入背景的方法？

Question

加载时淡入背景的方法？

javascriptjquerybackground

10

我正在设计一个网站，并需要一种方法来在body标签的背景图片完全加载后淡入（可能需要暂停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元素（覆盖实际背景的框）淡出。

- Brandon Wang

抱歉，在你的示例网站中我没有看到任何淡入效果。 - victor hugo

它在Firefox-Intrepid Ibex上无法工作。 - victor hugo

6个回答

2

我不确定是否有一种方法可以使背景图片淡入，但你可以使用一个绝对定位且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");
});

- Matt Bridges

1

你应该使用$(window).load()而不是$(document).ready()，因为这样可以确保图片已经加载完毕。这种方式等效于我的方法（除了页面语义）。 - Boldewyn

另一个问题：z-index：-1 使 img 被放置在 body 元素的后面。如果 body 应用了背景，你将看不到 img。如果您跳过 z-index 并确保 img 元素是您的 body 中的第一个元素，则足够了。 - Boldewyn

你说得对，我修改了示例代码。我实际上喜欢创建一个和渲染页面一样大的 div 并将其淡出（解决了平铺/重复背景的问题）。但你必须确保你的 div 足够大，或者使用整个文档的 offsetHeight 和 offsetWidth。 - Matt Bridges

2

我自己没有尝试过，但这个方法可能有效。

你可以先设置背景图片，再用一个黑色背景的大div来遮盖它。然后调整这个div的不透明度来创建淡入淡出的效果。这个黑色div必须覆盖整个页面。

- Assaf Lavie

我认为这似乎是最好的方式，因为我必须让它适用于没有启用JS的用户。 - Brandon Wang

2

我看到这个链接，

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

“该想法是：将您的背景应用于一个被分配了低z-index、绝对定位和背景的div（将其视为反向/背面模态框）。然后在其上方生成另一层具有透明背景的内容... 您现在可以通过id引用底层并更改不透明度。它所需要的只是一个堆栈/数组的背景图片，以作为层的属性应用...”

- Haim Evgi

0

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

它还可以将图像适应窗口的尺寸，但如果不需要，也可以禁用此功能。

- Erwan

-1

我的解决方案：

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

    };
};

- Kalinin

他想要淡化背景图像而不是普通图像。 - Web_Designer

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Boldewyn · Accepted Answer

没错：

不要给整个页面设置背景图片。然后准备一个带有淡入淡出效果的动画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，则会变得棘手。您必须创建一个占位符

，将其定位到正确的位置并调整不透明度。您还必须检测背景图像何时已加载，以便在慢速连接上不会出现愚蠢的跳跃。以下是一个不起作用的示例：

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

祝福您，