You need to provide a bit more detail. Is the image being loaded using AJAX? Or is the image in place when the page loads, and you just want to show something in the <p> while the page loads, then hide it once the image has finished loading?

If you give it a width and height, the browser will show a placeholder of the correct size until the image has "arrived." That way the layout doesn't shift or change once the image has been downloaded.

Then make sure jQuery is loaded and then do something like this:

$(window).load(function(){
// Do something after images are loaded
$(".loading").fadeOut("fast");
});

Note that this will wait for all images on the page to load. There are other methods to determine if a particular image has loaded, but hopefully this points you in the right direction.

Yeah, that's one way, but it's a bit flakey. I did something like that in the past when coding up an image gallery, but had to resort to a plugin that had better cross-browser support. It was probably just to support IE6 or something, so you may be fine....

There's a discussion [here on the topic. Looks like an updated version of the plugin I used is [URL="https://github.com/desandro/imagesloaded"]here](http://forum.jquery.com/topic/simple-image-load-detection-with-load).