Background eerst laden en dan in een keer in laten faden
Het gaat zich om het volgende.. Wat ik wil is dat als ik naar mijn website ga dat de achtergrond eerst volledig geladen wordt en dan pas in een keer netjes in doet faden. (dus niet zo stotterend laden)
Hier een demo van wat ik wil: http://livedemo00.template-help.com/joomla_33328/
Onderstaande codes heb ik al geprobeerd..
Deze:
$(".achtergrond").load(function(e){
$(".achtergrond").fadeIn(1000);
});
Deze:
$('.achtergrond', this).fadeIn("slow");
En deze:
$(".achtergrond").load("images/background.jpg", function(){$(this).fadeIn(1000);});
Dit is de HTML die ik gebruik:
<div align="center"><img class="achtergrond" src="images/background.jpg"></div>
En dit is de CSS:
.achtergrond {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -5000;
display:none;
}
Misschien dat hier iemand raad weet...
Wat je eigenlijk moet doen is de image-href NIET in de HTML zetten.
Dus die <img> er gewoon uit halen.
En dan met Javascript laden en tonen.
Werkt dat niet:
toon de afbeelding 1x1px groot ergens buiten het scherm. Zodra die volledig geladen is (body.onload) kan je die met jQuery als achtergrond van die <div> in laten faden.
Zorgt tevens ervoor dat de achtergrond aangepast word op iedere resolutie.