Eine Möglichkeit, den Hintergrund bei Belastung einzublenden?

Ich arbeite an einem Website-Design, und ich brauche eine Möglichkeit, das Hintergrundbild des Body-Tags zu verblassen, wenn es komplett geladen ist (vielleicht dann eine Pause von 500 ms).Eine Möglichkeit, den Hintergrund bei Belastung einzublenden?

Wenn Sie August Website-Design sehen, werden Sie den Hintergrund eingeblendet sehen; Dies geschieht jedoch mit einem Flash-Hintergrund. Gibt es eine Möglichkeit, dies mit jQuery oder JavaScript zu tun?

-Update 2010.09.19:

Also für diejenigen, die von Google kommen (dies ist derzeit die Nummer eins Ergebnis für „fade im Hintergrund auf Last“, dachte ich nur, dass ich‘ d für jeden eine klare Umsetzung Beispiel machen.

einen <div id="backgroundfade"></div> an Ihrem Code irgendwo in der Fußzeile hinzufügen (Sie können auch diese über JavaScript anhängen können, wenn Sie Ihre DOM nicht möchten, überladen zu bekommen.

Stil als solche -

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

Dann fügen Sie diese zu Ihrer JavaScript Skriptdatei (jQuery erforderlich):

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

Dies hat den Effekt, den Schwund das #backgroundfade Element (das Kästchen „Abdeckung“ Ihr tatsächlichen Hintergrund) in 1 Sekunde nach DOM-Abschluss.

Quelle

2009-06-28 Brandon Wang

Sorry, ich sehe nichts in Ihrem Beispiel Website Verblassen –

@victor, WFM auf Chrome –

Es funktioniert nicht auf Firefox-Intrepid Ibex –

Ich habe das nicht selbst getan, aber es könnte funktionieren.

Sie könnten, denke ich, das Hintergrundbild einrichten und es dann mit einem großen alten div maskieren, das einen schwarzen Hintergrund hat. Dann spiele mit der Deckkraft dieses div, um den Fade-Effekt zu erzeugen. Dieses schwarze div müsste den ganzen Körper abdecken.

Quelle

2009-06-28 18:34:11

Ich denke, das scheint der beste Weg, weil ich es für Benutzer arbeiten müssen, die JS nicht aktiviert haben. –

Yep:

Sie dem Körper ein Hintergrundbild nicht geben. Bereite dann ein animiertes GIF mit dem Fading-Effekt vor. In Javascript:

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

In jQuery wäre es

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

sein Wenn Sie das animierte GIF-Trick nicht tun wollen, aber für JPEG- oder PNG-Unterstützung benötigen, ist es unangenehm werden. Sie müssen einen Platzhalter erstellen <div/>, positionieren Sie es an der richtigen Stelle und spielen mit Deckkraft. Sie müssen auch erkennen, wann das Hintergrundbild geladen ist, damit Sie bei langsamen Verbindungen keine dummen Sprünge bekommen. Ein nicht funktionierendes Beispiel:

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,

Quelle

2009-06-28 18:22:34 Boldewyn

@Boldewyn Sie möchten Ihre Frage bearbeiten, anstatt Kommentare zu posten. BTW netter Avatar;) –

fertig, danke für Hinweis (und für den Kommentar zu meinem Avatar ;-)). – Boldewyn

@Brandon Wang, ich entwarf Boldewyn Lösung (der zweite Teil) in den vollständigen Code, siehe meine Antwort unter – Kalinin

Ich bin nicht sicher, ob es eine Möglichkeit gibt, das Hintergrundbild einblenden zu lassen, aber eine Möglichkeit besteht darin, ein absolut positioniertes Bild mit einem negativen Z-Index zu verwenden. Sie könnten dann jQuery verwenden, um das Bild einzublenden. Dieser Ansatz kann schwieriger sein, wenn Sie das Hintergrundbild zum Kacheln oder Wiederholen benötigen.

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

Die jQuery:

$(window).load(function() { 

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

Quelle

2009-06-28 18:35:22

Sie sollten $ (window) .load() anstelle von $ (document) ready() verwenden, da Sie auf diese Weise sicherstellen, dass das Bild bereits geladen wurde. Dann ist dieser Weg äquivalent (modulo die Seitensemantik) zu meinem Ansatz. – Boldewyn

Ein weiteres Problem: Z-Index: -1 bewirkt, dass das Img ** hinter ** dem body-Element verschwindet. Wenn auf den Körper ein Hintergrund angewendet wurde, wird der IMG nicht angezeigt. Es ist ausreichend, wenn Sie den Z-Index überspringen und sicherstellen, dass das img-Element das allererste Element in Ihrem Körper ist. – Boldewyn

Sie haben Recht, ich habe den Beispielcode geändert. Ich mag die Lösung, wo Sie ein div so groß wie die gerenderte Seite erstellen und es ausblenden (kümmert sich um das Problem mit Tiling/Hintergrund wiederholen). Sie müssen jedoch sicherstellen, dass Ihr div groß genug ist, oder verwenden Sie offsetHeight und offsetWidth des gesamten Dokuments. –

i diesen Link zu sehen,

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

die Idee ist:

ap füge deinen Hintergrund einem div hinzu, dem ein niedriger z-index, eine absolute Positionierung und ein Hintergrund zugewiesen wurde (denke an ein umgekehrtes/hinteres modal). dann produzieren Sie Ihren Inhalt in eine andere Schicht darüber mit einem transparenten Hintergrund ....

können Sie jetzt die untere Schicht durch ID referenzieren und die Deckkraft ändern.

alle es braucht, ist ein Stapel/Array von Hintergrund mages als Eigenschaft auf die Schicht aufzubringen ...

Quelle

2009-06-28 18:36:44

Warum nicht ein fertiges Skript verwenden: this one macht ein Hintergrundbild Fade-In auf Seite Last .

Es passt auch das Bild an die Abmessungen des Fensters, aber das kann deaktiviert werden, wenn nicht benötigt wird.

Quelle

2010-07-08 00:21:33 Erwan

-1

Meine Lösung:

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

    }; 
};

Quelle

2010-11-08 12:20:11 Kalinin

Er möchte ein Hintergrundbild nicht ein Bild verblassen. –

Eine Möglichkeit, den Hintergrund bei Belastung einzublenden?

Antwort

Verwandte Themen