...

View Full Version : Image preloading scripts... Really work?



viper21
01-29-2006, 09:35 PM
Do image preloading scripts really work? My site has lots of advertisments so i'd like to preload my images, make it run slightly faster if possible...

Anyone know of a good one?

TIA!

:cool:

vwphillips
01-29-2006, 10:01 PM
preloading images does work but can slow loading as preloading takes time

normally used for preloading mouse over images

this allows the page to load with small std image in as src of all images

then as large image loads swaps the image

uses both the image on load event and .complete


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
// Image PreLoad
// by Vic Phillips http://www.vicsjavascripts.org.uk


var zxcDelay=100;
var zxcDefaultImg='http://www.vicsjavascripts.org.uk/StdImages/Blank.gif';

var zxcImgAry=[];
var zxcLoadCk='Start';

function zxcPreLoadBatch(){
var zxcarg=zxcPreLoadBatch.arguments;
for (var zxc0=0;zxc0<zxcarg.length;zxc0+=2){
zxcPreLoad(zxcarg[zxc0],zxcarg[zxc0+1]);
}
}

function zxcPreLoad(zxcobj,zxcimg){
var zxcarg=zxcPreLoad.arguments;
if (!zxcobj){ zxcobj=new Object; }
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
if (zxcDefaultImg&&zxcobj.tagName){ zxcobj.src=zxcDefaultImg; }
zxcobj.img=new Image();
zxcobj.img.obj=zxcobj;
zxcobj.img.onload=function(){ zxcImgAry.push(this); if (zxcLoadCk=='Start'){ zxcCkLoad(); } }
zxcobj.img.src=zxcimg;
}

function zxcCkLoad(){
zxcLoadCk=false;
for (var zxc0=0;zxc0<zxcImgAry.length;zxc0++){
if (zxcImgAry[zxc0].complete&&!zxcImgAry[zxc0].set){
zxcImgAry[zxc0].set=true;
if (zxcImgAry[zxc0].obj.tagName){
if (zxcImgAry[zxc0].obj.tagName=='IMG'){
zxcImgAry[zxc0].obj.src=zxcImgAry[zxc0].src;
zxcImgAry[zxc0].obj.width=zxcImgAry[zxc0].width;
zxcImgAry[zxc0].obj.height=zxcImgAry[zxc0].height;
}
}
}
else if (!zxcImgAry[zxc0].set){ zxcLoadCk=true; }
}
if (zxcImgAry.length<1||zxcLoadCk){ setTimeout('zxcCkLoad();',zxcDelay); }
else { zxcImgAry=[]; zxcLoadCk='Start'; }
}


//-->
</script>
</head>

<body onload="zxcPreLoadBatch(null,'http://www.vicsjavascripts.org.uk/StdImages/One.gif','fred','http://www.vicsjavascripts.org.uk/StdImages/Two.gif','fred1','http://www.vicsjavascripts.org.uk/StdImages/Three.gif');">
<div style="position:relative;height:200px;" >
Loading Image
<img id="fred" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" style="position:absolute;left:0px;top:0px;">
</div>
<div style="position:relative;height:200px;" >
Loading Image
<img id="fred1" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" style="position:absolute;left:0px;top:0px;">
</div>
<div style="position:relative;height:200px;" >
Loading Image
<img id="fred3" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" style="position:absolute;left:0px;top:0px;">
</div>

<input type="button" name="" value="Load last Image" onclick="zxcPreLoad('fred3','http://www.vicsjavascripts.org.uk/StdImages/Four.gif');">
<input type="button" name="" value="Swap Image" onclick="zxcPreLoad('fred','http://www.vicsjavascripts.org.uk/StdImages/Four.gif');">
</body>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum