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

html, javascript

Solution

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

Problem

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.

Original source