[Javascript][Html] Attach a Loading Image

In Javascript, create a function to show the division and attach the loading image to it:

function attachLoadImgText(txt) {
var text = document.createTextNode(txt);

// NOTE: to make the loading gif working for IE, we MUST use the innerHTML trick...
$('loading').innerHTML = ''<img id="loadingImg" src="/images/loadinfo.gif"/>';
$('loading').appendChild(text);
$('loading').style.display = 'block';
}

In Html, create a division that will hold the image later, with display:none

<div id="loading" style="display: none; font-size: 14px"><img id="loadingImg" src="/images/loadinfo.gif" ></div>

NOTE:

In my example I used the Javascript Prototype, to do it in an old-fashioned Javascript style, use var load = document.getElementById('loading'); load.innerHTML = ...

Here is a very cool Loader Generator I found on the web, hope you find it useful as well :)