preloading images (should be easy)

[isilkin]

Funny! I am the only person who posted something today. ANyways guys, I am missing something very simple while trying to preload several images

in javascript:

var bigSample = new Array("samples/55.jpg","samples/54.jpg",
"samples/50.jpg","samples/51.jpg");

function preloading() {
for (var j=0; j<bigSample.length; j++) {
img[j] = new Image();
img[j].src = bigSample[j];
}
}

So after this function runs the rest of my script stops working, while I don't event know if preloading really worked.

Any advice would be so awesome.
Thanks to everyone again.

 

[dwarfthrower]

The rest of your script would be?

How are you calling the [tt]preloading()[/tt] function?

What error is being reported?

[sub]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.[/sub]
Webflo

 

[isilkin]

Thank you for you reply dwarfthrower! No I know I am doing something wrong cos I thought I people would need to know is that part of the script because it is unrelated to everything else. Anyways if you don't mind looking over:

window.onload = start;

function start() { //start independent functions
preloading();
newShow();
initLinks();
autoChangeHandler();
decorations();

}


var myThumbnails = new Array("thumbnails/55.jpg","thumbnails/54.jpg","thumbnails/50.jpg","thumbnails/51.jpg","thumbnails/52.jpg","thumbnails/45.jpg","thumbnails/48.jpg","thumbnails/43.jpg","thumbnails/37.jpg","thumbnails/27.jpg","thumbnails/47.jpg","thumbnails/55.jpg","thumbnails/56.jpg","thumbnails/57.jpg"
,"thumbnails/39.jpg","thumbnails/41.jpg");
var thisPic = 0;
var bigSample = new Array("samples/55.jpg","samples/54.jpg","samples/50.jpg","samples/51.jpg","samples/52.jpg","samples/45.jpg","samples/48.jpg","samples/43.jpg","samples/37.jpg","samples/27.jpg","samples/47.jpg","samples/55.jpg","samples/56.jpg","samples/57.jpg"
,"samples/39.jpg","samples/41.jpg");

function preloading() { //preloads images
for (var j=0; j<bigSample.length; j++) {
img[j] = new Image();
img[j].src = bigSample[j];
}
}
function decorations(){ //adds syle to elements
document.getElementById("bigPic").style.border = '2px solid #fff';
document.getElementById("bigPic").style.height = '350px';
document.getElementById("photoShow").align = 'middle';
}



function newShow() {//generates new thumbnails
for (var i=0; i<16; i++) {
setSquare(i);
}

}
function setSquare(thisSquare) {//populates thumbnails in the table cells
var currSquare = "square" + thisSquare;
document.getElementById(currSquare).src = myThumbnails[thisSquare];
document.getElementById(currSquare).style.border = '1px solid #fff';
document.getElementById(currSquare).style.height = '30px';
document.getElementById(currSquare).style.width = '30px';



}

function bigPicture(smallID)//gets large image for this particular thumbnail
{
var picindex = smallID.replace('square', '');
document.getElementById("bigPic").src = bigSample[picindex];
document.getElementById("bigPic").style.filter="blendTrans(duration=0.5";
document.getElementById("bigPic").filters.blendTrans.apply();
document.getElementById("bigPic").filters.blendTrans.play();
}

function enlargeImages(obj){ //opens image in new window
obj = window.open(bigSample[thisPic],'iSilkin Design Portfolio','width=600,height=600');
}

function bigOver(obj){//changes border color
obj.style.filter = 'alpha(opacity=50)';
obj.style.opacity = 0.5;
}
function bigOut(obj){
obj.style.filter = 'alpha(opacity=100)';
obj.style.opacity = 1;
}


function initLinks() {//initiate links: next and back
document.getElementById("prevLink").onclick = processPrevious;
document.getElementById("nextLink").onclick = processNext;
document.getElementById("play").onclick = autoChangeHandler;

}

function processPrevious() {
if (thisPic == 0) {
thisPic = bigSample.length;
}
thisPic--;
document.getElementById("bigPic").src = bigSample[thisPic];
return false;
}

function processNext() {
thisPic++;
if (thisPic == bigSample.length) {
thisPic = 0;
}
document.getElementById("bigPic").src = bigSample[thisPic];
return false;
}

function autoChangeHandler() {
if ( document.getElementById("play").innerHTML == "Play" ){ // Start the timer
document.getElementById("play").innerHTML = "Stop";
imageTimerId = setInterval("processNext()", 4000);


}
else {
document.getElementById("play").innerHTML = "Play";
clearInterval ( imageTimerId );
}
return false;
}



AND HTML IS THIS:

<table>
<tr>
<td><img src="" id="square0" onclick="bigPicture(this.id);" onmouseover="bigOver(this);" onmouseout="bigOut(this)"/></td>
<td><img src="" id="square1" onclick="bigPicture(this.id);" onmouseover="bigOver(this);" onmouseout="bigOut(this)"/></td>
<td><img src="" id="square2" onclick="bigPicture(this.id);" onmouseover="bigOver(this);" onmouseout="bigOut(this)"/></td>
<td><img src="" id="square3" onclick="bigPicture(this.id);" onmouseover="bigOver(this);" onmouseout="bigOut(this)"/></td>
<td><img src="" id="square4" onclick="bigPicture(this.id);" onmouseover="bigOver(this);" onmouseout="bigOut(this)"/></td>
<td><img src="" id="square5" onclick="bigPicture(this.id);" onmouseover="bigOver(this);" onmouseout="bigOut(this)"/></td>
<td><img src="" id="square6" onclick="bigPicture(this.id);" onmouseover="bigOver(this);" onmouseout="bigOut(this)"/></td>
<td><img src="" id="square7" onclick="bigPicture(this.id);" onmouseover="bigOver(this);" onmouseout="bigOut(this)"/></td>
<td><img src="" id="square8" onclick="bigPicture(this.id);" onmouseover="bigOver(this);" onmouseout="bigOut(this)"/></td>
<td><img src="" id="square9" onclick="bigPicture(this.id);" onmouseover="bigOver(this);" onmouseout="bigOut(this)"/></td>
<td><img src="" id="square10" onclick="bigPicture(this.id);" onmouseover="bigOver(this);" onmouseout="bigOut(this)"/></td>
<td><img src="" id="square11" onclick="bigPicture(this.id);" onmouseover="bigOver(this);" onmouseout="bigOut(this)"/></td>
<td><img src="" id="square12" onclick="bigPicture(this.id);" onmouseover="bigOver(this);" onmouseout="bigOut(this)"/></td>
<td><img src="" id="square13" onclick="bigPicture(this.id);" onmouseover="bigOver(this);" onmouseout="bigOut(this)"/></td>
<td><img src="" id="square14" onclick="bigPicture(this.id);" onmouseover="bigOver(this);" onmouseout="bigOut(this)"/></td>
<td><img src="" id="square15" onclick="bigPicture(this.id);" onmouseover="bigOver(this);" onmouseout="bigOut(this)"/></td>
</tr>
</table><br />
<div id="photoShow">
<a href="previous.html" id="prevLink">Previous</a>|<a href="next.html" id="nextLink">Next</a>|
<a href="stop.html" id="play">Play</a><br/>
<img src="samples/55.jpg" id="bigPic" onclick="enlargeImages(this);"/>

Sorry, this is a lot. But really all I wanted you to look at is the part that would preload the images.

Thank you ))))