:: How to display image loading messages with JavaScript

Bangladeshi Softwares

- - - - -

How to display image loading messages with JavaScript

Step-1:
Let's say, you have a web photo gallery full of high resolution images. Each of your images are 400/500 kilobytes in size or bigger. Of course, they will take some time to load over a slower internet connection (if you ever think about your visitors). Now you want to display some messages somewhere in the image window while the image loads, and clear those messages after the image finished loading.

This can be done with a few lines of code in JavaScript. Test the code below, I hope it can help you a little bit. Open your favorite text editor and type the code below:


<head>

<script language="javascript" type="text/javascript">
<!--

/*
 * Author: Ahsanul Haque Shovon
 * Email: ahsanul.haque.shovon@gmail.com / ahsanul_haque_shovon@yahoo.com
 * Web: http://shovon.110mb.com
 */

function clearMsg()
{
  document.getElementById("Loading_Msg").innerHTML = "";
}

//-->
</script>
</head>

<body onload="clearMsg();">

<span id="Loading_Msg">
Loading image... please wait...
</span>

<p>
<img src="test.jpg" border="0" width="800" height="600" alt="">
</p>

</body>

Step-2:
Now replace values of SRC, WIDTH and HEIGHT attributes inside the <IMG> tag with yours and save the code as 'any_name.html'. Click here to see the preview (99.5 KB, 800x600 pixels).

Other Helpful Resources:
http://www.scriptsearch.com
http://www.programmersheaven.com