Hintergrundbild einblenden

freaked

hellou...gibt es denn eine allgemein hin verträgliche möglichkeit ein hintergrundbild (body background), sofern es fertig geladen/gecached wurde per fade-effekt einzublenden, und falls nicht unterstützt normal eingeblendet wird?

**gandro**

Im Grunde sind das hier zwei Probleme:

1. Ein Bild im Vorhinein zu Laden und erst nach dem kompletten Download anzeigen.
2. Ein Hintergrundbild einfaden.

Das erste Problem lässt sich relativ elegant und einfach lösen, hier ein Stück Code was mit jedem Browser seit IE5 oder so funktionieren sollte:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Beschreibung der Seite</title>
</head>
<body>
<script type="text/javascript">
var background = "http://photojournal.jpl.nasa.gov/jpeg/PIA08653.jpg"


var imageLoader = new Image();
imageLoader.src = background;
imageLoader.onload = function () {
    // der Code hier wird ausgeführt wenn das Bild fertig geladen ist.
    document.body.style.backgroundImage = 'url(' + background + ')';
};
</script>
<!-- Fallback für Nicht-Javascripter -->
<noscript><style type="text/css">
body { background-image: url(http://photojournal.jpl.nasa.gov/jpeg/PIA08653.jpg); }
<style></noscript>


</body>
</html>

Alles anzeigen

Nen Hintergrundbild einzufaden hingegen ist einiges schwieriger. Du findest zwar viele Lösungen im Netz (z.B. hier), sind aber alle Scheisse und ein Gefrickel, weil CSS das nicht kann und man mit irgendwelchen Hilfs-DIVs arbeiten muss.

Falls du eine brauchbare Lösung findest, solltest du sie problemlos in obiges Script einbinden können.

Jetzt mitmachen!