...

View Full Version : Improving My javascript



ampulator00
12-17-2004, 02:32 AM
I was wondering if I can improve this piece of javascript; it does an image preoload:



function preload(img1, img2, img3, img4, img5, img6, img7, img8, img9, img10, img11, img12, img13, img14, img15)
{
if(document.images)
{
var img = [new Image, new Image, new Image, new Image, new Image, new Image, new Image, new Image, new Image, new Image, new Image, new Image, new Image, new Image, new Image];
img[0].src = img1;
img[1].src = img2;
img[2].src = img3;
img[3].src = img4;
img[4].src = img5;
img[5].src = img6;
img[6].src = img7;
img[7].src = img8;
img[8].src = img9;
img[9].src = img10;
img[10].src = img11;
img[11].src = img12;
img[12].src = img13;
img[13].src = img14;
img[14].src = img15;
}
else
{
img[0].src = "";
img[1].src = "";
img[2].src = "";
img[3].src = "";
img[4].src = "";
img[5].src = "";
img[6].src = "";
img[7].src = "";
img[8].src = "";
img[9].src = "";
img[10].src = "";
img[11].src = "";
img[12].src = "";
img[13].src = "";
img[14].src = "";
document.images = "";
}
}

joh6nn
12-17-2004, 03:54 AM
a couple of suggestions:

instead of numbering all the images you'll pass to the function, why not use the functions arguments property, so that you can more easily change the number of images that you want to pre-load. you can learn about the arguments property here: http://www.devguru.com/Technologies/ecmascript/quickref/arguments.html

secondly, you can pretty much do away with that "else" clause, especially since, the way you have things set up, the img array won't even be defined if document.images doesn't exist.

Willy Duitt
12-17-2004, 04:40 AM
Below is a preloading (postloading so the initial page load is not stalled) sequential image slideshow I use... The comments should be self explanatory... But the essence of the script is to simularly name but sequentialy number the images... In this example the images are: eliza1, eliza2, eliza3 and eliza4... All that matters is that the number is last and there are no leading zero's (001)....



<html>
<head>
<title>Post Load And Display Sequentially Numbered Images</title>
<BASE HREF="http://www.freewebs.com/foufou/">
<script type="text/javascript">
<!--// WRITTEN BY: WillyDuitt@hotmail.com 02/04/2004 //;
// PLEASE BEGIN BY ANSWERING THE FOLLOWING QUESTIONS! //;
// HOW MANY SEQUENTIAL IMAGES WOULD YOU LIKE TO SHOW? //;
var howMany = 4;
// USING QUOTES. WHAT IS THE PATH TO THE FIRST IMAGE? //;
var firstImage = 'eliza1.jpg';
// HOW MANY SECONDS BEFORE CHANGING IMAGES(.5 = ˝sec) //;
var speed = 5;
// USING QUOTES. USE FILTERS FOR IE USERS(yes | no)? //;
var filters = "yes";

////////////////////////////////////////////////////////;
// GLOBAL VARIABLES NO NEED TO EDIT BEYOND THIS POINT //;
var startNumber = (/\d+(?=\.)/.exec(firstImage));
var lastNumber = (startNumber*1)+(howMany-1);
var nextImage = (startNumber);

function loadSlides(){
for(var i=startNumber;i<=lastNumber;i++){
var postLoad = new Array();
postLoad[i] = new Image();
postLoad[i].src = firstImage.replace(/\d+(?=\.)/,i);
} showSlides("slider");
}

function showSlides(slider){
var image = document.images[slider];
if(document.all && filters.toLowerCase() == "yes"){
image.style.filter = "blendTrans(duration=3)";
image.filters.blendTrans.Apply();
image.filters.blendTrans.Play();
} if(nextImage > lastNumber){ nextImage = startNumber };
image.src = firstImage.replace(/\d+(?=\.)/,nextImage);
setTimeout('showSlides("slider")',speed*1000);
nextImage++;
}
//-->
</script>
</head>

<body onload="loadSlides()">
<div style="text-align:center;width:350px;height:280px">
<img name="slider" width="350" height="280" src="eliza1.jpg">
</div>

</body>
</html>


.....Willy

ampulator00
12-17-2004, 07:38 AM
Willy, thanks, that's interesting javascript, I might use it for a slideshow later; but I'm just preloading.

joh6nn: I tried to follow your suggestions, and here's what I got:



function preload()
{
var img = new Array();
for (number = 0; number < preload.arguments.length; number++)
{
if(document.images)
{
img[number] = new Image();
img[number].src = preload.arguments[number];
}
else
{
img[number] = "";
img[number].src = "";
document.images = "";
}
}
}


Is that good enough?

Or:



function preload()
{
var img = new Array();
var number = 0;
for (number in img)
{
number < preload.arguments.length;
number++;
if(document.images)
{
img[number] = new Image();
img[number].src = preload.arguments[number];
}
else
{
img[number] = "";
img[number].src = "";
document.images = "";
}
}
}


Or:



function preload()
{
var img = new Array();
var number = 0;
while (number < preload.arguments.length)
{
number++;
if(document.images)
{
img[number] = new Image();
img[number].src = preload.arguments[number];
}
else
{
img[number] = "";
img[number].src = "";
document.images = "";
}
}
}


Or:



function preload()
{
var img = new Array();
var number = 0;
do
{
number++;
if(document.images)
{
img[number] = new Image();
img[number].src = preload.arguments[number];
}
else
{
img[number] = "";
img[number].src = "";
document.images = "";
}
}
while (number < preload.arguments.length)
}

ampulator00
12-17-2004, 08:42 AM
I was thinking was it possible to make a for loop with this piece of javascripot code? This is a slidshow script. I want it to make the variable "thisPic" to loop, as long as their as is an image or set of images to slideshow.



var thisPic = [0, 0, 0, 0, 0];
function chgSlide(change, direction)
{
if(document.images)
{
thisPic[change] += direction;
imgCt = (imageChoice[change].length -1 && altChoice[change].length -1);
if(thisPic[change] > imgCt)
thisPic[change] = 0;
if(thisPic[change] < 0)
thisPic[change] = imgCt;
document.getElementById(slideID[change]).src = imageChoice[change][thisPic[change]];
document.getElementById(slideID[change]).alt = altChoice[change][thisPic[change]];
}
}

Willy Duitt
12-17-2004, 02:21 PM
Willy, thanks, that's interesting javascript, I might use it for a slideshow later; but I'm just preloading.

I assumed you would take and only use the preloading feature (loadSlides()) along with the necassary variables which provided the values for the firstImage, howMany, firstNumber, lastNumber, ect...

I use that routine on many of my scripts because of its benifit of only needing to declare the first image path and how many sequential images will be used... Plus, it doesn't matter if the first image is img1 or img56...

.....Willy

ampulator00
12-18-2004, 06:13 AM
I assumed you would take and only use the preloading feature (loadSlides()) along with the necassary variables which provided the values for the firstImage, howMany, firstNumber, lastNumber, ect...

I use that routine on many of my scripts because of its benifit of only needing to declare the first image path and how many sequential images will be used... Plus, it doesn't matter if the first image is img1 or img56...

.....Willy

I'll keep that in mind.

ampulator00
12-20-2004, 04:51 AM
Um... don't mean to do this, but what does anyone think of the changes I did to the script?

joh6nn
12-20-2004, 06:31 AM
the changes you made are a lot better than the script you started off with. frankly, in mind, that you thought about improving it at all puts you at a higher level than most javascripters. and the fact that you asked "how do i fix this?" instead of "will you fix this for me" is another step up.

there's still room for improvement in your script, of course (i still don't understand why you've got that 'else' statement, but that just might be me), but you've definitely made a step in the right direction.

ampulator00
12-20-2004, 06:49 AM
Thank you. :D

But I was wondering, do they work? the thing is, my internet connection loads too fast for me tell if they work or not... :confused: So I need an outside tester. :thumbsup:

Willy Duitt
12-20-2004, 07:21 AM
Thank you. :D

But I was wondering, do they work? the thing is, my internet connection loads too fast for me tell if they work or not... :confused: So I need an outside tester. :thumbsup:

Use alerts to check if the script is doing what you want...
Soemthing like: img[number].onload=alert(img[number]+' has loaded')

Or, clear your temporary internet files, run the script and then check if all the images are cached in your TIF...

Besides, unless I missed it, you did not provide a link fro anyone to test... If you are asking someone to build an entire document including images to run and test your script, you are asking quite alot...

.....Willy

ampulator00
12-20-2004, 07:22 AM
Oh, yeah, heh. Thanks for the tip.

ampulator00
12-20-2004, 08:34 AM
BTW, this isn't about the preload script, but how do I loop a variable? :confused:

Here's the javascript: http://www.codingforums.com/showpost.php?p=257992&postcount=5

Willy: Thanks Man! That thing worked out great!

Here's the final javascript:



{
var img = new Array();
for (var number = 0; number < preload.arguments.length; number++)
{
if(document.images)
{
img[number] = new Image();
img[number].src = preload.arguments[number];
img[number].src.onload = alert(preload.arguments[number] + " has loaded");
}
else
{
img[number] = "";
img[number].src = "";
document.images = "";
}
}
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum