...
PDA

Please could someone explain how this script works

robski_g
12-19-2006, 04:44 PM
Hi,
I am fairly new to Javascript and require some help. I would be very appreciative if someone could take the time to explain how the following script works. I understand the first part about defininng the variables and images but i am unsure as to how the array and functions work. If someone could explain what the various parts of the code do I would be most greatful.

<html>
<head>
<script type="text/javascript">
<!--


var pic_width=100;
var pic_height=100;


var button_text="Next Image";


if (document.images)
{
pic1= new Image(pic_width,pic_height);
pic1.src="image1.jpg";
pic2= new Image(pic_width,pic_height);
pic2.src="image2.jpg";
pic3= new Image(pic_width,pic_height);
pic3.src="image3.jpg";
pic4= new Image(pic_width,pic_height);
pic4.src="image4.jpg";
pic5= new Image(pic_width,pic_height);
pic5.src="image5.jpg";
}

var pics= new Array(5)
pics[0]=pic1.src;
pics[1]=pic2.src;
pics[2]=pic3.src;
pics[3]=pic4.src;
pics[4]=pic5.src;

var numpics=5;
var thenum=0;
imgName="img1";

function change_it()
{
if (document.images)
{
document.write("<IMG SRC='"+pics[thenum]+"' border='0' width='"+pic_width+"' height='"+pic_height+"' name='img1'>\n");
document.write("<BR><FORM><INPUT TYPE='button' value='"+button_text+"' onClick='change_it2()'></FORM>");
}
}

function change_it2()
{
var x=0;
thenum+=1;

if (thenum>numpics-1)
{
document[imgName].src=pics[0];
thenum=0;
}
else
{
document[imgName].src=pics[thenum];
x+=1;
}
}
//-->
</script>

<script type="text/javascript">
<!--
change_it();
//-->
</script>

</head>
<body>
rubenbuhr
12-19-2006, 06:24 PM
I don't know how it works, but I know what I'm familiar with. It's like riding a bicycle, I'll never be a teaCHER.
Anyways, I messed with a bit and changed it so the only thing you have to do is load the pic array with images, 1 to 100, no other messing with the code.


<html>
<head>
<script type="text/javascript">
<!--
var pics= new Array('one.gif','two.gif','three.gif');

var pic_width=100;
var pic_height=100;
var pic=new Array()

var button_text="Next Image";


if (document.images){
for(i=0;i<=pics.length-1;i++){
pic[i]= new Image(pic_width,pic_height); pic[i].src=pics[i];
}
}

var thenum=0;
imgName="img1";

function change_it(){
if (document.images){
document.write("<IMG SRC='"+pics[thenum]+"' border='0' width='"+pic_width+"' height='"+pic_height+"' name='img1'>\n");
document.write("<BR><FORM><INPUT TYPE='button' value='"+button_text+"' onClick='change_it2()'></FORM>");
}
}

function change_it2(){
var x=0;
thenum+=1;

if (thenum>pics.length-1){
document[imgName].src=pics[0];
thenum=0;
}
else{
document[imgName].src=pics[thenum];
x+=1;
}
}
//-->
</script>

<script type="text/javascript">
<!--
change_it();
//-->
</script>

</head>
<body>
Mr J
12-19-2006, 07:28 PM
Or slightly simpler

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<script type="text/javascript">
<!--
var pics= new Array('one.gif','two.gif','three.gif');

preload=new Array()

for(var i=0;i<pics.length;i++){
preload[i]=new Image();
preload[i].src=pics[i];
}

var thenum=1;

function changeIt(){

document.img1.src=pics[thenum];

thenum++;
if (thenum==pics.length){
thenum=0;
}

}

//-->
</script>

<style type="text/css">
#img1{
width:100px;
height:100px;
}
</style>

</HEAD>
<BODY>

<img src="one.gif" border="0"' id="img1" name="img1"><BR>
<input type="button" value="Next Image" onclick="changeIt()">

</BODY>
</HTML>
robski_g
12-19-2006, 08:34 PM
Thanks for the info guys but really I was after a brief explaination of what different parts of the code actually do. So if anyone can explain it it would be very helpful.cheers.
rubenbuhr
12-19-2006, 08:46 PM
Now that MrJ has made life simple, it could be explained without much headache. It all looks simple enough to me, each bit of text in the code has a self-describing definition except for "preload" which implies to me that the array of images are all loading up before you click the button that calls for them.
I have yet to have any practical luck with preloading scripts.
felgall
12-19-2006, 08:56 PM
What the script does is to make sure that all of the referenced images get loaded as part of the page loading process even though those images are not yet actually referenced by the HTML (if they are in the HTML then the code has no effect at all).

After the page finishes loading you can then swap one image in the page for another knowing that the image that is being inserted into the page and displayed has already been downloaded along with the rest of the page content.

If you don't use that script then image swaps in the page can still be done but the first time that a swap to an image not already downloaded is requested there will be a delay while the requested image is downloaded.

If you are not doing image swaps in the current page then the only other reason why you would use such a script is to download images that you expect will be needed by the next page that is visited in order to speed up the loading of the following page by making the current page load slower. Unless you are certain of what page your visitors will visit next and the current page doesn't contain very much of anything at all then preloading images for subsequent pages is not a good idea. You want to make sure that each page downloads in a reasonable time (80k is a high figure to use for the absolute maximum combined size of all of the files downloaded to display one page and for your home page a combined size under 40k is a good target).
Mr J
12-20-2006, 01:48 PM
Yep, I should have called it preloadImages:thumbsup:

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum