I am using a fairly large background image on a website I am developing. Currently, the background color loads, and when the image is done loading, it then loads. That is perfectly fine; however, I am trying to achieve an effect where a preloader gif spins until the background image loads, and then fades in. Currently here is my Jquery (which isnt working at all)
$(document).ready(function(){
$('span.loader').show();
$("body").css('background-image','url(images/bg.jpg)').ready(function(){
$("span.loader").hide();
});
});
This isnt doing what I want - I want the background color to show on load and display a loader within span.loader. When the background image of body is done loading, I want it to fade in (either on top of the loader, or hiding the loader). Any ideas? Below is my basic css:
body{background:url(images/bg.jpg) 50% 0 no-repeat #e6f8bb; font-family:'Arvo'; sans-serif;}
span.loader{position:absolute; top:39px; left:484px;height:31px; width:31px; background-image:url(images/loader.gif); display:none;}
What if you had a body-sized DIV set to the background color with the spinner (instead of on the body), then simply added the body background and slowly increased the transparency of the DIV until it's completely transparent, then removed it. You'd have to set the z-index of this DIV higher than the body, but lower than the content on the page.
Then you could use @Groovetrain's trick of checking that the image is loaded to trigger the reveal.
body{background-color: #e6f8bb; font-family:'Arvo'; sans-serif;}
body.loaded {background:url(images/bg.jpg) 50% 0 no-repeat #e6f8bb;}
div.reveal{position: absolute; height: 100%; width: 100%; z-index: 1; background-color: #e5f8bb;};
span.loader{position:absolute; top:39px; left:484px;height:31px; width:31px; background-image:url(images/loader.gif); }
#content { z-index: 2 }
<script type="text/javascript">
$(function() {
var img = new Image();
$(img).hide().load(function() {
$('body').addClass('loaded');
$('.reveal').animate({opacity:0}, function() {
$(this).remove();
});
});
img.src = "/images/bg.jpg";
});
</script>
<body>
<div class="reveal">
<span class="loader"> </span>
</div>
<div id="#content">
...
</div>
</body>
It won't 'fade', but it will show the new background-image and hide the spinner (which you can probably still put in a span and fade out in the load() callback here. This code was adapted from something I found for you here: http://jqueryfordesigners.com/image-loading/
In your css, have a rules for the body, one that will show the spinner, and that you can add later that will actually set the background image:
body.image-loading {background-image: url('images/spinner.gif'); }
body.image-loaded { background-image: url('images/bg.jpg'); }
Then in jQuery:
$(function() {
$('body').addClass('image-loading');
var img = new Image();
$(img).load(function () {
$(this).hide();
$('body').removeClass('image-loading')
.addClass('image-loaded');
})
.attr('src', 'images/bg.jpg');;
});
Without spending a lot of time dissecting it, wouldn't the display:none on span.loader do exactly that? What happens if you remove that?
