Hey guys I hav found this Script and use it. It really makes people wait till the page loads up 100%. I have Editted the Original one and made it a bit better by changing the colors. You can do the same to match your website. You can save this as index.html or as anything you want.
Code:
<HTML>
<HEAD>
<title>Preloading images...</title>
<SCRIPT>
/*
Preload Images III- By Pok-Ching Lee (http://orion.spaceports.com/~lpok/index.html)
For this script and more, visit http://www.javascriptkit.com
*/
///////////////////////////////////////////////
// PUT ALL IMAGES IN AN ARRAY FOR PRELOADING //
///////////////////////////////////////////////
var pics = new Array("http://mywebsite/image1.gif","http://mywebsite/image2.gif");
///////////////////////////////////////////////////
// ENTER URL TO GOTO AFTER IT FINSHES PRELOADING //
///////////////////////////////////////////////////
var url = "home.html";
////////////////////////////////////////////////////
// ASK USERS TO GO TO NEXT PAGE AFTER PRELOADING? //
////////////////////////////////////////////////////
var doConfirm = true;
////////////////////////////////////
// ALLOW USER TO SKIP PRELOADING? //
////////////////////////////////////
var canSkip = true;
////////////////////////////////////////////////////////////////////////////////////
//------------YOU ARE DONE, DON'T EDIT ANYTHING BEYOND THIS POINT-----------------//
////////////////////////////////////////////////////////////////////////////////////
var imgObjs = new Array(pics.length);
var loaded = 0;
var total = pics.length;
var cPercent = 0;
var barLayer = null;
var percentLayer = null;
var statLayer = null;
var doneMsgLayer = null;
function getLayer(layerID) {
if (document.getElementById)
return document.getElementById(layerID);
else if (document.all)
return document.all[layerID];
else
return null;
}
function updateBar() {
statLayer.innerHTML = "<font face=\"Arial\" color=\"#FFFFFF\"><B>" +loaded+ "/" +total+ "</B></font>";
var percent = Math.round(loaded/total * 100);
if (cPercent != percent)
{
cPercent = percent;
barLayer.style.width = (cPercent*3) +"px";
percentLayer.innerHTML = "<font color=\"#000000\"><B>" +cPercent+ "%</B></font>";
}
if (loaded == total)
{
doneMsgLayer.innerHTML = "<a href=\"javascript:done()\"><font face=\"Arial\" color=\"#dddddd\" size=\"2\"><B>Done (Click Here)</B></font></a>";
if (doConfirm && confirm("Files have finish loading, continue to next page?"))
done();
}
}
function startLoading() {
if (document.getElementById || document.all)
{
barLayer = getLayer("bar");
percentLayer = getLayer("percent");
statLayer = getLayer("stat");
doneMsgLayer = getLayer("doneMsg");
if (canSkip)
doneMsgLayer.innerHTML = "<a href=\"javascript:done()\"><font color=\"#dddddd\" size=\"2\" face=\"Arial\">Skip Pre-Loading</font></a>";
for (i=0; i<pics.length; i++)
{
imgObjs[i] = new Image();
imgObjs[i].onload = imgLoaded;
imgObjs[i].onerror = imgFailed;
imgObjs[i].src = pics[i];
}
}
else
{
window.location.replace(url);
}
}
function done() {
parent.window.location.replace(url);
}
function imgFailed() {
alert("The following image failed to load, probably a broken link:\n" +this.src+ "\nPlease contact the webmaster of the site you are visiting about this. The program will skip this file now.");
loaded++;
updateBar();
}
function imgLoaded() {
loaded++;
if (loaded>pics.length)
return
updateBar();
}
window.onload=startLoading
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF">
<center><FONT face=Arial color=#dddddd size=4>Preloading images. Please stand by...</FONT></center>
<DIV id=bg
style="LEFT: 200px; WIDTH: 300px; POSITION: absolute; TOP: 50px; HEIGHT: 20px; BACKGROUND-COLOR: #dddddd"></DIV>
<DIV id=bar
style="LEFT: 200px; WIDTH: 1px; POSITION: absolute; TOP: 50px; HEIGHT: 20px; BACKGROUND-COLOR: #FFFFFF"></DIV>
<DIV id=percent style="LEFT: 330px; POSITION: absolute; TOP: 50px"><FONT
color=#000000><B>0%</B></FONT></DIV>
<DIV id=stat style="LEFT: 520px; POSITION: absolute; TOP: 50px"><FONT face=Arial
color=#ffffff><B>0/0</B></FONT></DIV>
<DIV id=doneMsg style="LEFT: 620px; POSITION: absolute; TOP: 50px"></DIV>
<br><br><br>
<!--Rest of text...-->
</BODY></HTML>
01-03-2007, 10:33 PM
Preload Images
Linear Mode
Similar Threads
