Image Preloader w/ Status Bar
This code acts as a splash page and preloads images that the main site would need to provide lower loading time. It has a status bar indicator of the percent and number of images that it loaded. It also has a loading bar and option to skip the loading process. Its great code and you need to check it out!
AI
AI Summary: This codebase represents a historical implementation of the logic described in the metadata. Our preservation engine analyzes the structure to provide context for modern developers.
Source Code
<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0" />
<meta name="ProgId" content="FrontPage.Editor.Document" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Preloading Images</title>
<script language="JavaScript1.2">
<!-- begin hiding
//Image Preloader Script By Ct_Sirius@Hotmail.com!
//
//Sys_Reactor@Neowin.net
//
//Copyright 2001
//
//Please do not remove this message.
//
//!Read Instructions If Confused, Else Leave at Default Value!
//
//#Begin No-Modify Section
BeginColor = new Array()
EndColor = new Array()
//#End No-Modify Section!
//#Begin Modify Settings Section!
//#The Images You Want To Preload!
//#Place Them In the Array by ("img name","img name",...)!
var yourImages = new Array("")
//#The target page that you to redirect to after the images successfully preload!
//#Default = index2.html
var PreloadTarget = "index2.html"
//#The length of the preload status bar! Note it MUST BE larger than the number of images loaded!
//#Default = 500
var preloadbarWidth = 500
//#The height of the preload status bar!
//#Default = 20
var preloadbarHeight = 20
//#Default Color of the Preload Status Bar!
//#Default = White (#FFFFFF)!
var backgroundOfGradient = "#ffffff"
//#Enter the first letter or number of each set of HEX color codes!
//#Example {35,16,24}, Then BeginColor[0]=3, BeginColor[1]=1, BeginColor[2]=2, Etc!
//#You will NOT notice a color difference!
//#Default = {BC,BF,C0}
BeginColor[0] = "B"
BeginColor[1] = "B"
BeginColor[2] = "C"
//#Enter the first letter or number of each set of HEX color codes!
//#Example {35,16,24}, Then EndColor[0]=3, EndColor[1]=1, EndColor[2]=2, Etc!
//#You will NOT notice a color difference!
//#Default = {BC,BF,C0}
EndColor[0] = "B"
EndColor[1] = "B"
EndColor[2] = "C"
//#If you get a javascript error, adjust this value, otherwise please do not modify!
//#Note that the MINUNUM VALUE is 2!
//#Default = 5!
var gap = 5
//#End Modify Settings Section!
//#Begin No-Modify Section!
if (!document.all) location.replace(PreloadTarget)
var a = 10, b = 11, c = 12, d = 13, e = 14, f=15, i, j, decimal = new Array(), hex = new Array(), diff = new Array();
var convert = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"), imgLen = yourImages.length;
var loaded = new Array(), preImages = new Array(), currCount = 0, pEndColor = 0, h = 0, hilite = new Array(), cover = new Array();
var num = Math.floor(preloadbarWidth/gap);
for (i = 0; i < 3; i++) {
BeginColor[i] = BeginColor[i].toLowerCase();
EndColor[i] = EndColor[i].toLowerCase();
BeginColor[i] = eval(BeginColor[i]);
EndColor[i] = eval(EndColor[i]);
diff[i] = (EndColor[i]-BeginColor[i])/num;
decimal[i] = Math.floor(diff[i]);
hex[i] = Math.round((diff[i] - decimal[i])*15);
}
EndColor[0] = 0;
EndColor[1] = 2;
EndColor[2] = 1;
i = 0, j = 0;
while (i <= num) {
hilite[i] = "#";
while (j < 3) {
hilite[i] += convert[BeginColor[j]];
hilite[i] += convert[EndColor[j]];
BeginColor[j] += decimal[j];
EndColor[j] += hex[j];
if (EndColor[j] > 15) {
EndColor[j] -= 15;
BeginColor[j]++;
}
j++;
}
j = 0;
i++;
}
function loadImages() {
for (i = 0; i < imgLen; i++) {
preImages[i] = new Image();
preImages[i].src = yourImages[i];
loaded[i] = 0;
cover[i] = Math.floor(num/imgLen)*(i+1)
}
cover[cover.length-1] += num%imgLen
checkLoad();
}
function checkLoad() {
if (pEndColor) { changeto(); return }
if (currCount == imgLen) { location.replace(PreloadTarget); return }
for (i = 0; i < imgLen; i++) {
if (!loaded[i] && preImages[i].complete) {
loaded[i] = 1; pEndColor++; currCount++;
checkLoad();
return;
}
}
setTimeout("checkLoad()",10);
}
function changeto() {
if (h+1 > cover[currCount-1]) {
var percent = Math.round(100/imgLen)*currCount;
if (percent > 100) while (percent != 100) percent--;
if (currCount == imgLen && percent < 100) percent = 100;
defaultStatus = "Loaded " + currCount + " out of " + imgLen + " Images [" + percent + "%].";
pEndColor--;
checkLoad();
return;
}
eval("document.all.cell" + (h+1) + ".style.backgroundColor = hilite[h]");;
h++;
setTimeout("changeto()",1);
}
defaultStatus = "Loaded 0 out of " + imgLen + " images [0%]."
// end hiding -->
</script>
</head>
<body>
<div align="center">
<center>
<p> </p>
</center>
<p> </p>
<p> </p>
<p> </p>
<table width="75%" border="0" cellspacing="0" cellpadding="0" height="200" style="border-collapse: collapse" bordercolor="#111111">
<tbody>
<tr>
<td height="159">
<p align="center"> </p>
<p align="center"> </p>
<p align="center">
<font face="Arial" style="font-size: 7pt" color="#FF0000">Preloading Images</font></p>
<div align="center">
<font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#CCCCCC">
<script language="JavaScript1.2">
<!-- beging hiding
document.write('<table border="1" cellpadding="0" cellspacing="0" width="' + preloadbarWidth + '"><tr height="' + preloadbarHeight + '" bgcolor="' + backgroundOfGradient + '">');
for (i = 0; i < num; i++) {
document.write('<td width="' + gap + '" id="cell' + (i+1) + '"></td>');
}
document.write('</tr></table>');
document.write('<p><small><a href="javascript:location.replace(PreloadTarget)">Skip Loading (Not Recommended)</a></small></p></font>')
loadImages();
// end hiding -->
</script>
</font>
</div>
</td>
</tr>
</tbody>
</table>
<p> </p>
</div>
<p align="center"><b><font face="Arial" size="6" color="#FF0000">Loading...</font></b></p>
<p align="center"><b><font face="Arial" size="6" color="#FF0000">Please Wait...</font></b></p>
</body>
</html>
Original Comments (3)
Recovered from Wayback Machine