inline style causing text to display befor image?

Question

I found this piece of code on stackoverflow that would allow me to place a small image over a larger image (in my case a small lock to indicate the movie is unavailable)

<div style="position:relative;display:inline;">
        <img src="_images/test.jpg" width="350" />
            <div style="position:absolute;bottom:10px;right:10px;">
                <img src="_images/lock.png" width="40">
            </div>
        </div><h3>Air</h3>

it all displays perfectly, but there is a split second where the AIR tag at the bottom displays first (and sometimes the lock image), before it all snaps into place properly. (The main image, the lock in the bottom corner of the image, then the h3 tagged Air at the bottom.)

Does anyone know the cause of this, and how one might fix it? Thanks

Answer 1

One alternative is to place the src content in a data uri scheme. This will cause the images to load with the content. When you set src to a uri resource, the browser has to go out and get it. This causes the delay you see.

http://en.wikipedia.org/wiki/Data_URI_scheme