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
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 setsrc
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