Question

I would really like to load a background image before images within the page.

See: http://carolineelisa.com/boy/animation/, where I want the paper image to load before the animated gifs.

Can this be achieved via CSS or would it be a bit of Javascript or jQuery?

Thanks!

Answer 1

Granted: this isn’t foolproof, and results may vary in some browsers, but it should deliver satisfactory results in most cases.

<img id="bg_preload" src="path/to/image.jpg" style="position: absolute; top: -9999px;"/>
<img id="fg_1" class="fg_image" src="" style="visibility: hidden;"/>
<img id="fg_2" class="fg_image" src="" style="visibility: hidden;"/>
<img id="fg_3" class="fg_image" src="" style="visibility: hidden;"/>
<script type="text/javascript">
    $('#bg_preload').load(function() 
    {
        $('.fg_image').each(function() 
        {
            this.src = 'path/to/image.gif';
            this.style.visibility = 'visible';
        });
    });
</script>