So first of all, we declare a image array which included all the paths of the images we want to preload. And then we user javascript to create image elements (<img />) for every single image path in the array, and in the image onload event, we insert a function to refresh loading counter. Finally, we insert auto jump function to body onload event to jump to the actually page we want, in this case, it is google.com.
* Please remember the image path has to be an available path, or the image onload event will not fire and the counter will not show the correct percentage.
The simple code below create a loader page, which will preload 4 images first and then auto jump to google.com. The code was tested on IE7 and FIrefox2.
<html>
<head>
<script type="text/javascript">
var _currImg = 0;
var _totalImg = 0;
var _sURL = "htt"+"p://www.google.com";
var _arrImg = new Array(
"img_1.jpg",
"img_2.jpg",
"img_3.jpg",
"img_4.jpg"
)
function createHTMLEl()
{
_totalImg = _arrImg.length;
h = "<div id='icon' style='position:absolute;left:0px;top:0px;"
+"width:220px;height:120px;'>"
+"<div style='width:100%;height:90px;'>"
+"<span id='icontext' style='font-family:tahoma,arial;font-size:8pt;"
+"font-weight:bold;'>Graphic Loading... 0%</span>"
+"<span> </span>"
+"<img src='load.gif' align='absmiddle'/>"
+"</div>"
+"<div style='text-align:center;'>"
+"<input type='button' value='Skip' onclick='NextPage();'/>"
+"</div>"
+"</div>";
for (var i = 0; i < _arrImg.length; i++)
{
h += "<img src='"+_arrImg[i]+"'"
+"style='visibility:hidden;width:0px;height:0px;'"
+"onload='refreshProgressBar();'/>";
}
document.body.innerHTML += h;
}
function refreshProgressBar()
{
_currImg += 1;
if (_currImg < _totalImg) {
document.getElementById("icontext").innerHTML = "Graphic Loading... "
+Math.round((_currImg/_totalImg)*100)+"%";
}
else {
document.getElementById("icontext").innerHTML = "Graphic Loading... 99.9%";
}
}
function resetIconPos()
{
var o = document.getElementById("icon");
o.style.left = Math.round((document.body.clientWidth - o.offsetWidth)/2)+"px";
o.style.top = Math.round((document.body.clientHeight - o.offsetHeight)/2)+"px";
}
{
document.getElementById("icontext").innerHTML = "Graphic Loading... 100%";
window.location.href = _sURL;
}
</script>
</head>
<body onload="reLocateHTML();">
<script type="text/javascript">
createHTMLEl();
resetIconPos();
</script>
</body>
</html>
