CODEWITHSUNDEEP
javascripthtml
Robin Rodricks
Robin Rodricks

Reputation: 113946

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

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.

Upvotes: 4

Views: 4689

Answers (4)

Ash
Ash

Reputation: 3581

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

Upvotes: 3

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201518

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

Upvotes: 4

Jeff Watkins
Jeff Watkins

Reputation: 6359

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

Upvotes: 1

AJ.
AJ.

Reputation: 1144

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.

Upvotes: 1

Related Questions