Click to See Complete Forum and Search --> : Image Pre-load


Jick
07-09-2003, 01:35 PM
I have the code below that will pre-load my images on my page (http://kd7pyo.infinitypages.com/) and I want to add a part to the code that will display a blank page that says "Page Loading..." while the images load and then forward the user to the page after the images have loaded. Is this possible? I will greatly apprciate any help any of you can give me! Thanks. ;)

<script type="text/javascript">
<!--
if(document.images){
var Image1 = new Image();
var Image2 = new Image();
var Image3 = new Image();
var Image4 = new Image();
var Image5 = new Image();
var Image6 = new Image();
var Image7 = new Image();
var Image8 = new Image();
var Image9 = new Image();
Image1.src = "line.gif";
Image2.src = "menu_r1.gif";
Image3.src = "menu_r2.gif";
Image4.src = "x.gif";
Image5.src = "head.jpg";
Image6.src = "menu_r3.jpg";
Image7.src = "page_line.jpg";
Image8.src = "search.jpg";
Image9.src = "title.jpg";
}
//-->
</script>

h_monteiro
07-09-2003, 03:05 PM
You could create an image that reads "Please wait while image is loading......"

In the heading of that page place your preload script.
At the end of the script set "document.imagename.src=blank.gif" You can set the blank image to be 1x1 pixels. so it doesn't take up any space.

The "please wait while image is loading...." image can be larger than that, say 200X400. Once it swithes over to the blank 1x1 image the cell or whatever you use to position it will shrink to fit the smaller image.

Let me know if you find something better,
Horacio

Jick
07-09-2003, 08:26 PM
<html>
<head>
<script language="JavaScript1.2">
<!-- begin hiding
startingColor = new Array()
endingColor = new Array()

var yourImages = new Array("line.gif", "menu_r1.gif", "menu_r2.gif", "x.gif", "head.jpg", "menu_r3.jpg", "page_line.jpg", "search.jpg", "title.jpg")
var locationAfterPreload = "http://kd7pyo.infinitypages.com/"
var preloadbarWidth = 250
var preloadbarHeight = 15
var backgroundOfGradient = "#000000"

startingColor[0] = "c"
startingColor[1] = "f"
startingColor[2] = "f"

endingColor[0] = "c"
endingColor[1] = "0"
endingColor[2] = "0"

var gap = 5

if (!document.all) location.replace(locationAfterPreload)
var a = 10, b = 11, c = 12, d = 13, e = 14, f=15, i, j, ones = new Array(), sixteens = 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, pending = 0, h = 0, hilite = new Array(), cover = new Array();
var num = Math.floor(preloadbarWidth/gap);
for (i = 0; i < 3; i++) {
startingColor[i] = startingColor[i].toLowerCase();
endingColor[i] = endingColor[i].toLowerCase();
startingColor[i] = eval(startingColor[i]);
endingColor[i] = eval(endingColor[i]);
diff[i] = (endingColor[i]-startingColor[i])/num;
ones[i] = Math.floor(diff[i]);
sixteens[i] = Math.round((diff[i] - ones[i])*15);
}
endingColor[0] = 0;
endingColor[1] = 0;
endingColor[2] = 0;
i = 0, j = 0;
while (i <= num) {
hilite[i] = "#";
while (j < 3) {
hilite[i] += convert[startingColor[j]];
hilite[i] += convert[endingColor[j]];
startingColor[j] += ones[j];
endingColor[j] += sixteens[j];
if (endingColor[j] > 15) {
endingColor[j] -= 15;
startingColor[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 (pending) { changeto(); return }
if (currCount == imgLen) { location.replace(locationAfterPreload); return }
for (i = 0; i < imgLen; i++) {
if (!loaded[i] && preImages[i].complete) {
loaded[i] = 1; pending++; 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 + "%].";
pending--;
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 bgcolor="666600" text="000000" link="000000" vlink="C0C0C0" alink="666600">
<center>
<font face="Verdana, Arial, Helvetica" size="2"><center>Preloading Images... Please Wait..</center>
<script language="JavaScript1.2">
<!-- beging hiding
document.write('<table border="0" 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(locationAfterPreload)">Skip Preloading</a></small></p></font>')
loadImages();
// end hiding -->
</script>
</center>
</body>
</html>

The code above is the preload page (http://kd7pyo.infinitypages.com/preload.html) and it preloads images for my main page (http://kd7pyo.infinitypages.com/) but with it this way I would have to redo the pages and make it so the preload is index and what not. I want to merge these pages so all I have is one page that preloads and then shows the page. I found this script somewhere so I don't know how to fix it to do what I want. Please help. :D

Jick
07-09-2003, 08:35 PM
I think it might have something to do with this line:
var locationAfterPreload = "http://kd7pyo.infinitypages.com/"