Preload Images

**xtraze** · 01-03-2007, 07:33 PM

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>

**AfTriX** · 01-04-2007, 04:11 AM

Seems a bit of difficult to go through, I mean its a lengthy one. I'll try this out first and then let me comment you!

Keep on rocking...

**xtraze** · 01-06-2007, 06:11 PM

But no need to edit everyting lol. Only a couple of things. But you can mod everything if you want to. Try it.

I think this must be improved as this is not good for SEO.

**AfTriX** · 01-07-2007, 12:16 AM

I have tried this out a while ago, then I changed this directly to step-in to the Home page than giving a message box to confirm.

Nice Idea..
Thanks

Thread: Preload Images

LinkBack

Thread Tools

Search Thread

Display

Preload Images

Thread Information

Users Browsing this Thread

Similar Threads

Intermediate Tutorial: Storing Images in MySQL with PHP / Part II / Display your images

Images

images from URL

please help:put images together

CSS and Images

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions