¿Una manera de desvanecerse en segundo plano al cargar?

Estoy trabajando en el diseño de un sitio web, y necesito una forma de atenuar la imagen de fondo de la etiqueta del cuerpo cuando está completamente cargada (quizás una pausa de 500 ms).¿Una manera de desvanecerse en segundo plano al cargar?

Si ve el diseño del sitio web August, verá el fondo se desvanece; sin embargo, esto se hace con un fondo Flash. ¿Hay alguna manera de hacer esto con jQuery o JavaScript?

Actualización 9/19/2010:

Así que para aquellos que vienen de Google (esto es actualmente el resultado número uno para "desvanecimiento en el fondo de la carga", pensé yo' d hacer un ejemplo de implementación más clara para todo el mundo.

Añadir un <div id="backgroundfade"></div> a su código en algún lugar en el pie de página (también se puede añadir esto a través de JavaScript si no quiere que su DOM conseguir desordenada.

Estilo como tal -

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

A continuación, agregue esto a su archivo de secuencias de comandos JavaScript (jQuery requiere):

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

Esto tiene el efecto de desvanecimiento del #backgroundfade elemento (el cuadro de "cobertura" de su fondo real) en 1 segundo al finalizar el DOM.

Fuente

2009-06-28 Brandon Wang

Lo siento, no se ve nada de desvanecimiento en su sitio ejemplo –

@victor, WFM en Chrome –

No funciona en Firefox-Intrepid Ibex –

no he hecho esto por mí mismo, pero que podría funcionar.

Podrías, supongo, configurar la imagen de fondo y luego enmascararla con un gran div viejo que tiene un fondo negro. Luego juega con la opacidad de este div para crear el efecto de fundido. Este div negro debería cubrir todo el cuerpo.

Fuente

2009-06-28 18:34:11

. Creo que esta parece ser la mejor manera porque tengo que hacer que funcione para los usuarios que no tienen habilitado JS. –

Sí:

No se dé una imagen de fondo del cuerpo. Luego prepare un GIF animado con el efecto de desvanecimiento. En Javascript:

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

en jQuery sería

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

Si no quiere hacer el truco GIF animado, pero necesita soporte para JPEG o PNG, es desagradable llegar. Deberá crear un marcador de posición <div/>, colocarlo en el lugar correcto y jugar con opacidad. También debe detectar cuándo se cargó la imagen de fondo, de modo que no obtenga saltos tontos en conexiones lentas. Una de no trabajar ejemplo:

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

Cheers,

Fuente

2009-06-28 18:22:34 Boldewyn

@Boldewyn le gustaría editar su pregunta en lugar de publicar comentarios. Por cierto buen avatar;) –

hecho, gracias por señalar (y por el comentario sobre mi avatar ;-)). – Boldewyn

@Brandon Wang, diseñé la solución de Boldewyn (la segunda parte) en el código completo, consulte mi respuesta a continuación – Kalinin

No estoy seguro de si hay una manera de hacer que la imagen de fondo se desvanezca, pero una forma de hacerlo es usar una imagen totalmente posicionada con un índice z negativo. Luego puede usar jquery para fundirse en la imagen. Este enfoque podría ser más complicado si necesita la imagen de fondo para mosaico o repetir.

El 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>

El jQuery:

$(window).load(function() { 

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

Fuente

2009-06-28 18:35:22

Debe usar $ (ventana) .load() en lugar de $ (documento) listo(), porque de esta manera se asegura de que la imagen ya se haya cargado. Entonces, de esta manera es equivalente (módulo de la semántica de la página) a mi enfoque. – Boldewyn

Otro problema: z-index: -1 hace que el img vaya ** detrás de ** el elemento del cuerpo. Si el cuerpo tiene un fondo aplicado, no verá el img. Es suficiente, si omite el índice z y asegúrese de que el elemento img sea el primer elemento de su cuerpo. – Boldewyn

Tienes razón, modifiqué el código de ejemplo. De hecho, me gusta la solución donde se crea un div tan grande como la página renderizada y se desvanece (se ocupa del problema con mosaico/repetición de fondos). Sin embargo, debe asegurarse de que su div sea lo suficientemente grande, o use el offsetHeight y offsetWidth de todo el documento. –

veo este enlace,

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

la idea es:

ap maneja tu fondo a un div al que se le ha asignado un índice z bajo, un posicionamiento absoluto y un fondo (piénsalo como un modal inverso/posterior). luego, genere su contenido en otra capa encima con un fondo transparente ...

ahora puede hacer referencia a la capa inferior con el id. y cambiar la opacidad.

todo lo que necesita es una pila/arreglo de fondo magos aplicar como una propiedad de la capa ...

Fuente

2009-06-28 18:36:44

por qué no usar un script ya hecho: this one hace un fundido de imagen de fondo al cargar la página .

También ajusta la imagen a las dimensiones de la ventana, pero esto se puede desactivar si no es necesario.

Fuente

2010-07-08 00:21:33 Erwan

-1

Mi solución:

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

    }; 
};

Fuente

2010-11-08 12:20:11 Kalinin

Él quiere atenuar una imagen de fondo, no una imagen. –

¿Una manera de desvanecerse en segundo plano al cargar?

Respuesta

Cuestiones relacionadas