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 pletely, and the title image es in later.

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 pletely, and the title image es in later.

• javascript
• html

4 Answers 4

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

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

use the Alt tag but even that is no guarantee:

<img src="yourimagepath" alt="Title Text" title="Title Text" />

Alternatively, you can use a JS hack: Set the title of your page as text and replace the content of the title container with the image using JS after the full page load.

You can dynamically load images in jQuery with only a very small amount of code. You can do smooth things like place "Loading..." animations or AJAX spinners in place of your content if you like this way.

From a ment on the jQuery documentation

var _url = "image.jpg";

// set up the node / element
_im =$("<img>");

// hide and bind to the load event
_im.hide();
_im.bind("load",function(){ $(this).fadeIn(); });

// append to target node / element
$('body div#target').append(_im);

// set the src attribute now, after insertion to the DOM
_im.attr('src',_url);

in pseudocode, create and hide an image element, assign an onload event handler, set the src attribute loading the image dynamically. The handler fades the image in smoothly.