When working in Chrome, I have found that using .ready() from jQuery gets the job done for me. For reference, here is a link to my fiddle:
http://jsfiddle.net/pWjBM/5/
The image used in this example is simply a random one chosen by me and happens to be quite large - therefore, it may take some time to load in certain scenarios. It might be advisable to replace it with a smaller image. Nevertheless, the end result appears to meet the desired criteria: there is a delay in loading, followed by an alert and the display of a textbox (#txt). This functionality seems to function properly in Firefox as well, but I cannot confirm its compatibility with other browsers.
UPDATE: Surprisingly, this appears to work seamlessly in Chrome, Firefox, and Safari, however, it does not cooperate with IE8. So... it performs well in all major browsers :)
UPDATE2: After extensive experimenting, a combination of Allesandro's suggestions and my own solution appears to do the trick. I utilize .ready() on a hidden img element to detect when the image has finished loading, then proceed to incorporate it into the CSS background.
http://jsfiddle.net/pWjBM/41/
Here is the HTML snippet:
<div id="testdiv">
<input type="text" id="txt" style="display:none;" />
</div>
<img src="http://www.nasa.gov/sites/default/files/images/712130main_8246931247_e60f3c09fb_o.jpg" id="dummy" style="display:none;" alt="" />
Javascript code block:
$(function() {
$('#dummy').ready(function() {
alert('loaded');
$('#testdiv').css('background-image', 'url(http://www.nasa.gov/sites/default/files/images/712130main_8246931247_e60f3c09fb_o.jpg)');
$('#txt').show(1000);
});
});
CSS styling:
#testdiv {
background:#aaaaaa none no-repeat right top;
width: 400px;
height: 400px;
}
#txt{
margin-left: 180px;
margin-top: 140px;
}
DISCLAIMER: One user mentioned that changing the URL of the image still triggers the loaded event. In reality, this behavior aligns quite closely with expectations based on the existing code - it does not verify if the URL leads to a legitimate image. Instead, it simply fires an event once the img is ready and alters the background accordingly. The assumption within the code is that the provided URL points to a valid image, and additional error checking is deemed unnecessary given the context of the question.