DOM element background images: load order

Dear all,

I've been trying to understand how an html page loads with respect to background images. Firebug shows me that the background image for a wrapper div element is the last to load. I'm wondering if there's a way to coerce the background image to render before any of the contained images are loaded and displayed by a javascript. (some skeleton psuedocode at the bottom)

I have the jQuery cycle plugin rendering the images in sequence on jQuery(document).ready(). Depending upon a variety of factors, browser, network latency, etc., I sometimes find that img 1 and 2 load and the cycle() slideshow commences before the background image of <content> is rendered.

I've tried preloading the background image via js as well as using js to set the background property before doc.ready() fires. In both cases all I accomplish is to download the image twice, and it still renders last.

could someone help clarify how the DOM and browsers handle element background images, and perhaps suggest how one might control it?

thanks,

Jon

<body>
<div id="wrapper">
<div id="content" style="background: url(someimage.jpg)"> <!--in an external css file-->
    <img id="1" />
    <img id="2" />
    <div>
        <div>
        <img id="cycleslide" /> 
        </div>
        .
        .
        .
    </div>
</div>
</div>
</body>

ansaurus

tags:

views:

answers:

DOM element background images: load order

related questions