PDA

Click to See Complete Forum and Search --> : image loading order script

etard
09-30-2003, 03:35 PM
I need to try to find a nice small scrpipt that allows me to load images in order on a page. I am using the following script, but I am open to something else:

var imgArray = new Array("a1","a2","a3","a4","a5","a6","a7","a8","a9","a10");

var len = imgArray.length

var imgDir = "";

var num = 0;



for (i = 0; i < len; i++) {



imageObj1 = imgArray[i] + "";

temp = eval(imageObj1 + " = new Image()");

temp.src = imgDir + imageObj1 + ".jpg";



}



function StartCycle() {



eval("document."+imgArray[num]+".src = "+imgArray[num]+".src");

num = num + 1;



if (num < len) {

setTimeout("StartCycle()", 1000);

}

}

but the problem is that when the page loads, the images load as thye would on any site (at random so to speak), and rather than load the images 1 by 1 in my order, it loads them then removes them 1 by 1. Why is that happening? It is like it is working, but in reverse. What am I missing?
etard
09-30-2003, 04:11 PM
okay - it is not working backward, what I discovered is that you need a blank image (like a spacer) in place of the image and then the script calls the image to load in order BUT what is happening is that the script is not finding the image directory and loading the images. I have tweaked the var imgDir = ""; and still not loading of images.

what gives? seems like a pain in the butt. any bettr script you know of??
etard
09-30-2003, 04:29 PM
I got it... it was the var imgDir = ""; . For it to work, it had to be hardcoaded to the image directory as a relative link was not finding it. Once I got that, it works pretty cool. I can load any images in an order and speed I desire. I have tested the script on OS X browsers for IE, NS, Opera, and Camino. PC browsers next to test. Pretty handy script. Downfall is that the images on the page need to be coded into the page as a blank image (like a spacer.gif) and then it will pull the image and put it into place.
Charles
09-30-2003, 04:30 PM
Another downfall is that the 13% of users that do not use JavaScript will never get your images.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Example</title>

<ul>
<li><img alt="[Bettie Page]" src="http://www.bettiepage.com/images/photos/bikini/bikini1.jpg"></li>
<li><img alt="[Bettie Page]" src="http://www.bettiepage.com/images/photos/bikini/bikini2.jpg"></li>
<li><img alt="[Bettie Page]" src="http://www.bettiepage.com/images/photos/bikini/bikini3.jpg"></li>
<li><img alt="[Bettie Page]" src="http://www.bettiepage.com/images/photos/bikini/bikini4.jpg"></li>
</ul>

<script type="text/javascript">
<!--
imageArray = new Array ();
loaded = 0;
for (i=0; i<document.images.length; i++) {
imageArray[i] = new Image ();
imageArray[i].src = document.images[i].src;
imageArray[i].onload = function () {if (++loaded == document.images.length) {for (var i=0; i<document.images.length; i++) {document.images[i].src = imageArray[i].src}}}
document.images[i].src = '';
}
// -->
</script>