kostenloser Webspace werbefrei: lima-city

Homepage hintergrund fade

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   stargate

   

   stargate hat kostenlosen Webspace.

   12:18, 3.10.2011

   Hallo, ich möchte bei einer Homepage ein Hintergrundbild reinmachen.
   Das sollte 1920x1080 groß sein.
   Jetzt ist das aber ziemlich blöd, weil das so lange laden muss, also hab ich mir gedacht es wäre doch toll, wenn mit so nem javascript effekt oder so der hintergrund zuerst weiß mit so nem ladezeichen ist und erst wenn das bild fertig geladen ist, es mit einem fade in-effekt erscheint.
   
   ist das machbar?

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. sincer

   

   sincer hat kostenlosen Webspace.

   18:19, 3.10.2011

   Hey ;)
   
   Das was du beschreibst, geht ziemlich sicher. Ist nur die Frage, ob du das dann auch wirklich willst. Eine Hintergrund-Grafik sollte eigentlich nichts sein, was extra lange laden muss.
   Mein Tipp ist: Schraube die Qualität deines Hintergrundbilds runter. Damit wird die Datei leichter und ist somit schneller geladen.
   
   Falls du dich aber nicht von deinem Lade-Fade-Effekt abbringen lassen willst habe ich auch einen Tipp:
   Sieh die die JavaScript-Bibliothek "jQuery" an. Damit ersparst du dir eine Menge Arbeit, was den Fade-Effekt angeht. (Wobei der jetzt in JS auch nicht soo kompliziert wäre.)
   
   Ich will dir den Spaß am Googlen und herum probieren nicht nehmen, aber so als Leitfaden kannst (musst natürlich nicht) du dich an folgende Eckpfeiler halten:
   Mit dem JS Objekt "Image" kannst du dir ein Bild (deine schwere Hintergrundgrafik) laden.
   Mit dem Image Attribut "complete" kannst du abfragen, ob das Bild schon geladen ist, oder nicht. (Ich weiß jetzt nicht, ob man da ein Event drauf ansetzen kann, oder ob du z.B. alle 500 MS abfragen musst, ob das Bild schon geladen ist... Vermutlich zweiteres, so gut kenne ich mich mit JS nicht aus ^^)
   Mit dem jQuery-Befehl fadeOut() / fadeIn() kannst du deine Lade-Grafik ausfaden, und dein Vorgeladenes Hintergrundbild einfaden lassen.
   
   Ich hoffe, dass dir das weiterhilft :)
   Sincer

4. s**s

   12:09, 7.10.2011

   muss meinem vorredner recht geben, mit jquery kannst du alle html bausteine nachträglich manipulieren.
   wobei ich dir raten würde deine grafik wesentlich dünner zu machen und mit dem befehl "repeat" zu arbeiten, bzw. die grafik schon beim laden der seite vorladen lassen.

5. tddv-kml

   tddv-kml hat kostenlosen Webspace.

   18:56, 5.12.2011

   Dazu muss ein Effekt genutzt werden. Dazu hier ein Link: http://developer.apple.com/safaridemos/photo-transitions.php
   Ein Hintergrund ist mit CSS zu erstellen.
   

   body {
   background-image: url(bg.jpg)
   }

6. t*****o

   18:48, 9.12.2011

   Hey!
   
   Ein Beispiel mit jQuery: http://bit.ly/v60fBV
   Das Hintergrundbild wird, nachdem es geladen ist, als Bild im Hintergrund eingeblendet.
   Code steht auf der Seite...
   
   Till

7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?