Un modo per sfumare in background durante il caricamento?

Sto lavorando a una progettazione di siti Web e ho bisogno di un modo per dissolvere l'immagine di sfondo del tag del corpo quando è stato completamente caricato (forse una pausa di 500 ms).Un modo per sfumare in background durante il caricamento?

Se vedi il disegno del sito web August vedrai lo sfondo sfuma; tuttavia, questo viene fatto con uno sfondo Flash. C'è un modo per farlo con jQuery o JavaScript?

Aggiornamento 2010/09/19:

Quindi, per coloro che stanno arrivando da Google (questo è attualmente il risultato numero uno "dissolvenza in background sul carico", ho solo pensato che' d fare un esempio di implementazione più chiaro per tutti.

Aggiungi un <div id="backgroundfade"></div> al codice da qualche parte nel piè di pagina (potete anche aggiungere questo tramite JavaScript se non si desidera che il DOM ottenere ingombra.

Stile come tale -

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

Quindi aggiungere questo al file di script JavaScript (jQuery richiesto):

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

Questo ha l'effetto di dissolvenza del #backgroundfade elemento (la casella "copre" il tuo sfondo reale) in 1 secondo al completamento del DOM.

fonte

2009-06-28 Brandon Wang

dispiace non vedo nulla di dissolvenza nel tuo esempio sito –

@victor, WFM su Chrome –

Non funziona su Firefox-Intrepid Ibex –

non ho fatto questo io stesso, ma potrebbe funzionare.

Si potrebbe, credo, impostare l'immagine di sfondo e quindi mascherarla con un div vecchio grande che ha uno sfondo nero. Quindi gioca con l'opacità di questo div per creare l'effetto dissolvenza. Questo div nero dovrebbe coprire l'intero corpo.

fonte

2009-06-28 18:34:11

Penso che questo sia il modo migliore perché devo farlo funzionare per gli utenti che non hanno JS abilitato. –

Yep:

Non dare al corpo un'immagine di sfondo. Quindi prepara una GIF animata con l'effetto dissolvenza. In Javascript:

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

In jQuery sarebbe

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

Se non si vuole fare il trucco GIF animato, ma serve il supporto per JPEG o PNG, si ottiene di brutto. Dovrai creare un segnaposto <div/>, posizionarlo nel posto giusto e giocare con l'opacità. Devi anche rilevare quando l'immagine di sfondo è stata caricata, in modo da non ottenere salti stupidi su connessioni lente. Un non-lavoro Esempio:

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,

fonte

2009-06-28 18:22:34 Boldewyn

@Boldewyn vorresti modificare la tua domanda invece di postare commenti. Bella avatar BTW), –

fatto, grazie per il punto (e per il commento sul mio avatar ;-)). – Boldewyn

@Brandon Wang, ho progettato la soluzione Boldewyn (la seconda parte) nel codice completo, vedere la mia risposta sotto – Kalinin

Non sono sicuro che ci sia un modo per far sfumare l'immagine di sfondo, ma un modo per farlo è usare un'immagine assolutamente posizionata con uno z-index negativo. È quindi possibile utilizzare jquery per dissolvere l'immagine. Questo approccio potrebbe essere più complicato se hai bisogno dell'immagine di sfondo da affiancare o ripetere.

Il codice 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>

Il jQuery:

$(window).load(function() { 

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

fonte

2009-06-28 18:35:22

Dovresti usare $ (window) .load() invece di $ (document) ready(), perché in questo modo ti assicuri che l'immagine è già stata caricata. Quindi, in questo modo è equivalente (modulo la semantica della pagina) al mio approccio. – Boldewyn

Un altro problema: z-index: -1 rende l'img andare ** dietro ** l'elemento body. Se al corpo è applicato uno sfondo, non vedrai l'immagine. È sufficiente, se salti lo z-index e assicurati che l'elemento img è il primo elemento del tuo corpo. – Boldewyn

Hai ragione, ho modificato il codice di esempio. In realtà mi piace la soluzione in cui si crea un div grande come la pagina renderizzata e si dissolve (si occupa del problema con sfondi piastrellatura/ripetuti). Devi però assicurarti che il tuo div sia abbastanza grande, o usare l'offsetHeight e offsetWidth dell'intero documento. –

vedo questo link,

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

l'idea è:

ap distribuisci il tuo background ad un div a cui è assegnato un basso indice z, posizionamento assoluto e uno sfondo (pensalo come un reverse/back modale). quindi crea il tuo contenuto in un altro livello su di esso con uno sfondo trasparente ....

ora puoi fare riferimento allo strato inferiore con id e modificare l'opacità.

tutto ha bisogno è una pila/serie di sfondo maghi da applicare come una proprietà per lo strato di ...

fonte

2009-06-28 18:36:44

Perché non utilizzare uno script ready-made: this one rende un'immagine di sfondo fade-in al caricamento della pagina .

Si adatta anche l'immagine alle dimensioni della finestra, ma può essere disattivata se non necessaria.

fonte

2010-07-08 00:21:33 Erwan

-1

La mia soluzione:

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

    }; 
};

fonte

2010-11-08 12:20:11 Kalinin

Vuole sbiadire un'immagine di sfondo non un'immagine. –

Un modo per sfumare in background durante il caricamento?

risposta

Problemi correlati