show alternate text in place of an image, before image loads

Question

How can I show text in place of an image, before the image loads?

Because on an HTML website I have an image as the title of the page, so the page loads completely, and the title image comes in later.

Answer 1

<h1><img src="heading.png" alt="Some nice heading here"
         width="600" height="80"></h1>

Use the alt attribute and set the image dimensions (in HTML or in CSS) to ensure that browsers can allocate appropriate space before getting the image. You can also apply CSS styling to the img element, e.g. font face, size, and color; on modern browsers, the styling will be applied to the alternate text when the image has not been got yet (or ever). Using code above, you can set the styles on the h1 element.

Altenatively, use just (styled) text for the heading initially but replace it by the image using JavaScript:

<h1 style="width: 600px; height: 80px">Some nice heading here</h1>
<script>
new Image('heading.png'); // preloads the image
var h1 = document.getElementsByTagName('h1')[0];
h1.innerHTML = '<img src=heading.png alt="' + h1.innerHTML + '">';
</script>

Answer 2

How about this-

<div id="img">some text</div>
<script>
 $(document).ready(function(){
   $("#img").innerHTML="<img src="myimg.jpg">"
  });
 });
 </script>

jQuery is a good option to do this:-)