preloading images not working?

G

Geoff Cox

Hello,

I am still having problems - apologies if the answer is in previous
postings!

I now have, in the header,

<sctipt>
var myimages=new Array();

function preloadimages();
{
for (i=0;i<preloadimages.arguments.length;i++)
{
myimages=new Image();
myimages.src=preloadimages.arguments;
}
}
</script>

and

<body
onload="preloadimages('before-and-after.gif','pic1.jpg','pic2.jpg',
'pic3.jpg','pic4.jpg','pic5.jpg','pic6.jpg','pic7.jpg')">

The above is in the first page where only the first image above, the
before-and-after.gif image, is displayed.

The rest are displayed in the second page linked to the first and are
shown by using an array

var picture = new Array(7);
picture[0] = "pic1.jpg";
picture[1] = "pic2.jpg";
picture[2] = "pic3.jpg";
picture[3] = "pic4.jpg";
picture[4] = "pic5.jpg";
picture[5] = "pic6.jpg";
picture[6] = "pic7.jpg";

and then displayed using typical code as follows

document.getElementById('picture').innerHTML
= "<img src=" + window["picture"][situation_number] + ">";

I am finding that the first 3 jpg images are displayed quickly in the
second page (presumably from the IE v6 cache), but the others 4 are
only downloaded when the second page gets to the point where they are
to be displayed.

Am I wrong somewhere? Where can I look to see which images, if any,
have been preloaded into the browser cache? The use of the picture
array is possibly wrong or redundant??

Cheers

Geoff
 
W

web.dev

Hi Geoff,

Geoff said:
Hello,

I am still having problems - apologies if the answer is in previous
postings!

I now have, in the header,

<sctipt>
var myimages=new Array();

function preloadimages();
{
for (i=0;i<preloadimages.arguments.length;i++)
{
myimages=new Image();
myimages.src=preloadimages.arguments;
}
}
</script>

and

<body
onload="preloadimages('before-and-after.gif','pic1.jpg','pic2.jpg',
'pic3.jpg','pic4.jpg','pic5.jpg','pic6.jpg','pic7.jpg')">
Click to expand...


To me, this method is redundant. The whole purpose is to *preload* the
images, not to grab the images once the page has loaded.
The above is in the first page where only the first image above, the
before-and-after.gif image, is displayed.

The rest are displayed in the second page linked to the first and are
shown by using an array

var picture = new Array(7);
picture[0] = "pic1.jpg";
picture[1] = "pic2.jpg";
picture[2] = "pic3.jpg";
picture[3] = "pic4.jpg";
picture[4] = "pic5.jpg";
picture[5] = "pic6.jpg";
picture[6] = "pic7.jpg";

and then displayed using typical code as follows

document.getElementById('picture').innerHTML
= "<img src=" + window["picture"][situation_number] + ">";

I am finding that the first 3 jpg images are displayed quickly in the
second page (presumably from the IE v6 cache), but the others 4 are
only downloaded when the second page gets to the point where they are
to be displayed.

Am I wrong somewhere? Where can I look to see which images, if any,
have been preloaded into the browser cache? The use of the picture
array is possibly wrong or redundant??

Cheers

Geoff
Click to expand...

Try not to use the onload event to preload your images. Instead you
might want to try it this way:

<script type = "type/javascript">
//place this in between the HEAD tag

//preload images
var myImages = new Array();
var n_images = 7;

//if you know the number of images to preload
for(var i = 0; i < n_images; ++i)
{
myImages = new Image();
//only useful if your pictures have a common name
myImages.src = "path/pic" + i + ".jpg";
}

function displayImages()
{
var imgStr = "";

for(var i = 0; i < n_images; ++i)
{
imgStr += "<img src ='" + myImages.src + "/>";
}

document.getElementById("picture").innerHTML = imgStr;
}

window.onload = displayImages;
</script>

And in the body of your html, you should ensure you have an element
with the id "picture".

For example:

<body>
....
<div id = "picture"></div>
....
</body>
 
G

Geoff Cox

To me, this method is redundant. The whole purpose is to *preload* the
images, not to grab the images once the page has loaded.
Click to expand...

Hello,

I thought the above was pre-loading!! What is it doing?
Try not to use the onload event to preload your images. Instead you
might want to try it this way:
Click to expand...

I would certainly like to try your suggestions but when you write that
I should have
<div id = "picture"></div>
Click to expand...

this might be difficult? What happens is that the page starts with a
table in the <body> area, and then a cell is populated with the
question text and an image for a particular "situation", using
Javascript. When the question has been answered the next situation
image and question go into the table etc etc using the following
method ..
document.getElementById('picture').innerHTML
= "<img src=" + window["picture"][situation_number] + ">";
Click to expand...

Will you code work in this way?

Cheers

Geoff




<script type = "type/javascript">
//place this in between the HEAD tag

//preload images
var myImages = new Array();
var n_images = 7;

//if you know the number of images to preload
for(var i = 0; i < n_images; ++i)
{
myImages = new Image();
//only useful if your pictures have a common name
myImages.src = "path/pic" + i + ".jpg";
}

function displayImages()
{
var imgStr = "";

for(var i = 0; i < n_images; ++i)
{
imgStr += "<img src ='" + myImages.src + "/>";
}

document.getElementById("picture").innerHTML = imgStr;
}

window.onload = displayImages;
</script>

And in the body of your html, you should ensure you have an element
with the id "picture".

For example:

<body>
...
<div id = "picture"></div>
...
</body>
Click to expand...
 
G

Geoff Cox

no problem just ammend your javascript which writes out the question to also
write out the div.
document.getElementById('picture').innerHTML
= "<img src=" + window["picture"][situation_number] + ">";
Click to expand...
Click to expand...
Click to expand...

Zoe,

When you say "write out the div" - the above code for changing the
image depends on the ID of the <td> tag, ei

<td ID='picture' valign='top'></td>

Not clear how your ref to a div filts in here?

Cheers

Geoff
 
G

Geoff Cox

Web dev

I have your code working but just another thought.

Is it possible to use Javascipt to put up a message saying "please
wait while images are downloaded" ? Or, make the questions and slider
appear after the images have been downlloaded?

The other thought I'd had was to preload the images for the second
page whilst the first page was on the screen but of couse the line

document.getElementById("picture").innerHTML = imgStr;

gives an error. Is there a way round this?

Cheers

Geoff
 
G

Geoff Cox

no problem just ammend your javascript which writes out the question to also
write out the div.
document.getElementById('picture').innerHTML
= "<img src=" + window["picture"][situation_number] + ">";
Click to expand...

Will you code work in this way?
Click to expand...

Yes.
Click to expand...

Zoe,

When I said to web dev that his code was working - afraid I made a
mistake! I still had

var picture = new Array(7);
picture[0] = "pic1.jpg";
picture[1] = "pic2.jpg";
picture[2] = "pic3.jpg";
picture[3] = "pic4.jpg";
picture[4] = "pic5.jpg";
picture[5] = "pic6.jpg";
picture[6] = "pic7.jpg";

in the code so although the images were preloaded my code was using
the above arry names to show the images.

Can you explain how I would alter

document.getElementById('picture').innerHTML =
"<img src=" + window["picture"][situation_number] + ">";

to use web dev's code?

He has

document.getElementById("picture").innerHTML = imgStr;

but I'm not clear what this means. I need the images to be preloaded
but they are only displayed 1 at a time as the user progresses through
the app....

Cheers

Geoff
 
G

Geoff Cox

??? Why do you need this line ? this line is for displaying the image and
shouldnt be called until the image is in place. What page is this line on ?
Click to expand...

Zoe,

It is difficult for you to see what I am trying to do so here is the
full code - most grateful for any further help in getting me to see
how to handle the preloading of the images! I have not worked out yet
how to dsiplay the images when required ... as you will see!
Previously I had used the array of picture (// out below).

Geoff

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<HEAD>

<link rel=stylesheet href="slider.css" type="text/css">
<SCRIPT SRC="slider.js"></SCRIPT>
<SCRIPT SRC="prototype-1.3.1.js"></SCRIPT>
<script src="questions.js"></script></script>

<script type="text/javascript">

//preload images
var myImages = new Array();
var n_images = 8;

for(var i = 0; i < n_images; ++i)
{
myImages = new Image();

myImages.src = "pic" + i + ".jpg";
}

function displayImages()
{
var imgStr = "";

for(var i = 0; i < n_images; ++i)
{
imgStr += "<img src ='" + myImages.src + "/>";
}

document.getElementById("picture").innerHTML = imgStr;
}

window.onload = displayImages;

var mySlider1 = new Slider( "Slider1" );
var count = 0;

var situation_number = 0;

var slider_value = new Array(8);
for (var n = 0; n < slider_value.length; n++ ) {
slider_value[n] = new Array(8);
}

mySlider1.leftValue = -10;
mySlider1.rightValue = 10;
mySlider1.defaultValue = 0;
mySlider1.offsetX = 1;
mySlider1.offsetY = 1;
mySlider1.buttonWidth = 10;
mySlider1.maxSlide = 288;

mySlider1.onchange
="document.getElementById('Slider1ValueText').innerHTML
=''+this.getValue(0)";

var title = new Array(7);
title[0] = "Social Individual";
title[1] = "Formal Individual";
title[2] = "Social Group";
title[3] = "Formal Group";
title[4] = "Parents";
title[5] = "Telephone";
title[6] = "'Scripted' Conversations";

// var picture = new Array(7);
// picture[0] = "pic1.jpg";
// picture[1] = "pic2.jpg";
// picture[2] = "pic3.jpg";
// picture[3] = "pic4.jpg";
// picture[4] = "pic5.jpg";
// picture[5] = "pic6.jpg";
// picture[6] = "pic7.jpg";


function next_question(button)
{

slider_value[situation_number][count] = this.mySlider1.getValue(0);

//totalreadings += ' ' + this.mySlider1.getValue(0);

this.count++;

if (this.count < 8)
{

document.getElementById('lhs_question').innerHTML = window["lhs_" +
situation_number][count];
document.getElementById('rhs_question').innerHTML = window["rhs_" +
situation_number][count];

mySlider1.setValue( (mySlider1.leftValue + mySlider1.rightValue) / 2
);

} else {

situation_number++;

switch(situation_number)
{
case (1):
mySlider1.setValue( (mySlider1.leftValue +
mySlider1.rightValue) / 2 );
count=0;
fillTable();
break;
case (2):
mySlider1.setValue( (mySlider1.leftValue +
mySlider1.rightValue) / 2 );
count=0;
fillTable();
break;
case (3):
mySlider1.setValue( (mySlider1.leftValue +
mySlider1.rightValue) / 2 );
count=0;
fillTable();
break;
case (4):
mySlider1.setValue( (mySlider1.leftValue +
mySlider1.rightValue) / 2 );
count=0;
fillTable();
break;
case (5):
mySlider1.setValue( (mySlider1.leftValue +
mySlider1.rightValue) / 2 );
count=0;
fillTable();
break;
case (6):
mySlider1.setValue( (mySlider1.leftValue +
mySlider1.rightValue) / 2 );
count=0;
fillTable();
break;
case(7):
if (button.parentNode &&
button.parentNode.removeChild) {
button.parentNode.removeChild(button);
}
saveIt();
break;

}

}

}

function fillTable()
{
document.getElementById('title').innerHTML = "<h2>" +
title[situation_number] + "</h2>";
document.getElementById('picture').innerHTML = "<img src=" +
window["picture"][situation_number] + ">";

document.getElementById('lhs_question').innerHTML = window["lhs_" +
situation_number][count];
document.getElementById('rhs_question').innerHTML = window["rhs_" +
situation_number][count];

}

function saveIt()

{
document.getElementById("Slider1ValueText").innerHTML = "";

for (situation_number = 0; situation_number < 7;
situation_number++)
{
document.getElementById("Slider1ValueText").innerHTML
+= escape("\n") + "Situation: " + title[situation_number] + " ";

for (var i = 0; i <
slider_value[situation_number].length; i++)
{
document.getElementById("Slider1ValueText").innerHTML
+= this.slider_value[situation_number] + ' ';
}
}


var recipient = "extraemails";
var realname = "SPA Form";
var url = 'http://website/path/formmail-nms.cgi';
//var pars = 'recipient=' + recipient + '&' + 'realname=' +
realname + '&' + 'Name=' + name + '&' + 'Slider Values= ' +
document.getElementById('Slider1ValueText').innerHTML;
var pars = 'recipient=' + recipient + '&' + 'realname=' +
realname + '&' + 'Name=' + name + '&' + 'Slider Values=' +
document.getElementById("Slider1ValueText").innerHTML

var myAjax = new Ajax.Updater('Status', url, {method: 'post',
parameters: pars});
}

</script>

</HEAD>

<body onload="mySlider1.placeSlider()">
<center>

<table border='0' width='100%'>
<tr>
<td>&nbsp;</td>
<td ID='title' valign='top' align='center'></td>
<td>&nbsp;</td>
</tr>

<tr>
<td>&nbsp;</td>
<td ID='picture' valign='top'></td>
<td>&nbsp;</td>
</tr>

<tr>
<td colspan="3">&nbsp;</td>
</tr>

<tr>
<td ID='lhs_question' width='30%' valign='top' height='70'></td>
<td width='40%' align='center' valign='top' height='70'><IMG
SRC='sliderbg.gif' NAME='Slider1RailImg' ID='Slider1RailImg'></td>
<td ID='rhs_question' width='30%' valign='top' height='70'></td>
</tr>

<tr><td colspan='3' align='center' valign='top' height='100'>
<input type='button' name ='nextbutton' value='Next'
onclick='next_question(this)'>
<SPAN class='invisible' ID='Slider1ValueText'></SPAN>
<SPAN ID='Status'></SPAN></td>
</tr>
</table>
</center>

<script>
fillTable();
</script>


<SCRIPT>

mySlider1.writeSlider();

</SCRIPT>

</body>
</html>
 
M

Mick White

Geoff said:
Hello,

I am still having problems - apologies if the answer is in previous
postings!

I now have, in the header,

<sctipt>
Click to expand...
I suggest you use "script", at least.
var myimages=new Array();
Click to expand...

"var" above is redundant
function preloadimages();
{
for (i=0;i<preloadimages.arguments.length;i++)
Click to expand...


for(var i=0;i<arguments.length;i++) // "var" here highly recommended

{
myimages=new Image();
myimages.src=preloadimages.arguments;
myimages.src=arguments;

}
}
</script>
Click to expand...

[...]
Mick
 
A

ASM

Geoff Cox wrote:

hi,

I'm not sure you can both have :
- window.onload = displayImages; (in header js script)
and
- <body onload="mySlider1.placeSlider()">

and I think you must choice a way to do (in script or in body tag)


I see :
<img src=" + window["picture"][situation_number] + ">";
what is window ?
and what is window['picture'] ?
On Wed, 14 Sep 2005 20:30:55 GMT, "Zoe Brown"

help in getting me to see
how to handle the preloading of the images! I have not worked out yet
how to dsiplay the images when required ... as you will see!
Click to expand...

see below
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Click to expand...

mas i mas complicado
<html>
<HEAD>

<link rel=stylesheet href="slider.css" type="text/css">
<SCRIPT SRC="slider.js"></SCRIPT>
<SCRIPT SRC="prototype-1.3.1.js"></SCRIPT>
<script src="questions.js"></script></script>

<script type="text/javascript">

//preload images
var myImages = new Array();
var n_images = 8;
Click to expand...

it's here that would have to preload your images
for(var i = 0; i < n_images; ++i)
{
myImages = new Image();

myImages.src = "pic" + i + ".jpg";
}
Click to expand...


but, on my idea, it only memorizes paths to images

to be almost quite sure they are in cache :

var ig=0;
function preload_imgs() {
myImages[ig] = new Image();
myImages[ig].onload = preload_imgs;
myImages[ig].src = "pic" + ig + ".jpg";
ig++ ;
}

preload_imgs();

function displayImages()
{
var imgStr = "";

for(var i = 0; i < n_images; ++i)
{
imgStr += "<img src ='" + myImages.src + "/>";
}

document.getElementById("picture").innerHTML = imgStr;
}

window.onload = displayImages;
Click to expand...
 
G

Geoff Cox

var ig=0;
function preload_imgs() {
myImages[ig] = new Image();
myImages[ig].onload = preload_imgs;
myImages[ig].src = "pic" + ig + ".jpg";
ig++ ;
}

preload_imgs();
Click to expand...

Stephane,

I have used your code above (making var ig = 1 to start as the pics
are named pic1) .... but the problem seems to be that I cannot have 2
items in the <body onload etc>

I have

<body onload="preload_imgs()">

<script>
mySlider1.placeSlider();
</script>

which gives the error message "object needed" for the line with
mySlider1.placeSlider();

if I have

<body onload="mySlider1.placeSlider()"> this is OK but I then get an
error in putting the first pic in the table - I guess the creation of
the table is happening before the pics have been loaded.

Any thoughts?!

Geoff
 
G

Geoff Cox

just do this

<body onload="preload_imgs();mySlider1.placeSlider();">
Click to expand...

Zoe,
I am using

<body onload="preload_imgs();mySlider1.placeSlider();">

but I keep getitng the error

'myImages[..].src' is null or not an object.

How do I test to see that the preload_imgs() is working?

Cheers

Geoff
 
G

Geoff Cox

What is this case statement about, each case executes the same code !!!
Click to expand...

Zoe,

I know but I thought that the vital difference was the value of the
situation_number varies!?

Geoff
 
G

Geoff Cox

So write a method to preload images and test it works. Write a methid to
create a slider and check it works. Add the images to the slidr and check
it works. You are probably writing big chucks of code or copying and
pasting and then getting lost. I have been a developer for years and I
might still only write a few lines at a time and then test. I might write a
case statement for example and put an alert in each case before putting in
any code that I want executed. i have learnt that if you change too much
there is too large a margin for error. you should try and refrain from
cutting and pasting any code from this ng into your code. Just read it and
then rewrite it according to your needs.
Click to expand...

Zoe,

I'm sure you are right - a lot less frantic changing required !

Geoff
 
G

Geoff Cox

On Thu, 15 Sep 2005 09:10:36 GMT, "Zoe Brown"

Zoe,

One aspect I do not understand is that if I use alert() to check the
value of

myImages[0].src

it gives http://website/pico.jpg

so when I use

myImages[0].src

later to display this image it seems to me that the image is being
taken from the website rather than from the cache? How does this work?

Geoff
 
G

Geoff Cox

On Thu, 15 Sep 2005 09:10:36 GMT, "Zoe Brown"

Zoe,

The code below works except that I would like to be able to only show
the "Next" button when either the first image or, perhaps better all
the images, have been downloaded.

I have tried

<script>
if (myImages[6].src)
{
sendButton();
}
</script>

but this does not work - the button is displayed before the first
image is displayed and so the user can click it and cause an error.

Any ideas?

Cheers

Geoff


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<HEAD>

<link rel=stylesheet href="slider.css" type="text/css">
<SCRIPT SRC="slider.js"></SCRIPT>
<SCRIPT SRC="prototype-1.3.1.js"></SCRIPT>
<script src="questions.js"></script>

<script type="text/javascript">


var myImages = new Array();

var numImages = 7;

for (var z=0; z<numImages; z++)
{
myImages[z]=new Image();
myImages[z].src="pic" + z + ".jpg";
}



var mySlider1 = new Slider( "Slider1" );

var count = 0;

var situation_number = 0;

var slider_value = new Array(8);
for (var n = 0; n < slider_value.length; n++ ) {
slider_value[n] = new Array(8);
}

mySlider1.leftValue = -10;
mySlider1.rightValue = 10;
mySlider1.defaultValue = 0;
mySlider1.offsetX = 1;
mySlider1.offsetY = 1;
mySlider1.buttonWidth = 10;
mySlider1.maxSlide = 288;

mySlider1.onchange
="document.getElementById('Slider1ValueText').innerHTML
=''+this.getValue(0)";

var title = new Array(7);
title[0] = "Social Individual";
title[1] = "Formal Individual";
title[2] = "Social Group";
title[3] = "Formal Group";
title[4] = "Parents";
title[5] = "Telephone";
title[6] = "'Scripted' Conversations";

function next_question(button)
{

slider_value[situation_number][count] = this.mySlider1.getValue(0);

//totalreadings += ' ' + this.mySlider1.getValue(0);

this.count++;

if (this.count < 8)
{

document.getElementById('lhs_question').innerHTML = window["lhs_" +
situation_number][count];
document.getElementById('rhs_question').innerHTML = window["rhs_" +
situation_number][count];

mySlider1.setValue( (mySlider1.leftValue + mySlider1.rightValue) / 2
);

} else {

situation_number++;

switch(situation_number)
{
case (1):
mySlider1.setValue( (mySlider1.leftValue +
mySlider1.rightValue) / 2 );
count=0;
fillTable();
break;
case (2):
mySlider1.setValue( (mySlider1.leftValue +
mySlider1.rightValue) / 2 );
count=0;
fillTable();
break;
case (3):
mySlider1.setValue( (mySlider1.leftValue +
mySlider1.rightValue) / 2 );
count=0;
fillTable();
break;
case (4):
mySlider1.setValue( (mySlider1.leftValue +
mySlider1.rightValue) / 2 );
count=0;
fillTable();
break;
case (5):
mySlider1.setValue( (mySlider1.leftValue +
mySlider1.rightValue) / 2 );
count=0;
fillTable();
break;
case (6):
mySlider1.setValue( (mySlider1.leftValue +
mySlider1.rightValue) / 2 );
count=0;
fillTable();
break;
case(7):
if (button.parentNode &&
button.parentNode.removeChild) {
button.parentNode.removeChild(button);
}
saveIt();
break;

}

}

}

function fillTable()
{

document.getElementById('title').innerHTML = "<h2>" +
title[situation_number] + "</h2>";

document.getElementById('picture').innerHTML = "<img src ='" +
myImages[situation_number].src + "' />";

document.getElementById('lhs_question').innerHTML = window["lhs_" +
situation_number][count];
document.getElementById('rhs_question').innerHTML = window["rhs_" +
situation_number][count];

}

function saveIt()

{
document.getElementById("Slider1ValueText").innerHTML = "";

for (situation_number = 0; situation_number < 7;
situation_number++)
{
document.getElementById("Slider1ValueText").innerHTML
+= escape("\n") + "Situation: " + title[situation_number] + " ";

for (var i = 0; i <
slider_value[situation_number].length; i++)
{
document.getElementById("Slider1ValueText").innerHTML
+= this.slider_value[situation_number] + ' ';
}
}


var recipient = "extraemails";
var realname = "SPA Form";
var url = 'http://website/path/formmail-nmst.cgi';
//var pars = 'recipient=' + recipient + '&' + 'realname=' +
realname + '&' + 'Name=' + name + '&' + 'Slider Values= ' +
document.getElementById('Slider1ValueText').innerHTML;
var pars = 'recipient=' + recipient + '&' + 'realname=' +
realname + '&' + 'Name=' + name + '&' + 'Slider Values=' +
document.getElementById("Slider1ValueText").innerHTML

var myAjax = new Ajax.Updater('Status', url, {method: 'post',
parameters: pars});
}

function sendButton()
{
document.write("<center>");
document.write("<table>");
document.write("<tr><td colspan='3' align='center' valign='top'
height='100'>");
document.write("<input type='button' name ='nextbutton' value='Next'
onclick='next_question(this)'>");
document.write("<SPAN class='invisible'
ID='Slider1ValueText'></SPAN>");
document.write("<SPAN ID='Status'></SPAN></td>");
document.write("</tr>");
document.write("</table>");
document.write("</center>");

}


</script>

</HEAD>

<body onload="mySlider1.placeSlider()">

<center>

<table border='0' width='100%'>
<tr>
<td>&nbsp;</td>
<td ID='title' valign='top' align='center'></td>
<td>&nbsp;</td>
</tr>

<tr>
<td>&nbsp;</td>
<td ID='picture' valign='top'></td>
<td>&nbsp;</td>
</tr>

<tr>
<td colspan="3">&nbsp;</td>
</tr>

<tr>
<td ID='lhs_question' width='30%' valign='top' height='70'></td>
<td width='40%' align='center' valign='top' height='70'>
<IMG SRC='sliderbg.gif' NAME='Slider1RailImg'
ID='Slider1RailImg'></td>
<td ID='rhs_question' width='30%' valign='top' height='70'></td>
</tr>


</table>
</center>

<script>
if (myImages[6].src)
{
sendButton();
}

</script>


<script>
fillTable();
</script>


<SCRIPT>

mySlider1.writeSlider();

</SCRIPT>

</body>
</html>
 
G

Geoff Cox

The source of the image will not change, simply that the local machine has
allready got the image in its cache and when it sees a link for that image
will actually go to the cache instead.
Click to expand...

OK - I see.

Geoff
 
G

Geoff Cox

but you dont use situation_number for anything apart from deciding which
case to take, regadless of this value you execture the same code.
Click to expand...

Zoe,

OK - so I should have a function which just increments
situation_number etc?

Geoff

PS the Case code does work but presumably there is a lot of redundant
code?
 
G

Geoff Cox

Just replace the case code with this.

{

situation_number++;

mySlider1.setValue( (mySlider1.leftValue + mySlider1.rightValue) / 2 );
count=0;
fillTable();
}

what is the point is looking at the situation_number to decide what to do
and then just doingthe same regardless of this value ? I suspect you needed
the value for a previous version of this code, and now you have changed it
slightly it is now redundant. not good in any case.
Click to expand...

Zoe,

I have done as above the changed situation_number causes a new images
and a new question to be displayed ... that's the idea and that
happens so must be right?!!?

Geoff
 
A

ASM

Geoff said:
var ig=0;
function preload_imgs() {
myImages[ig] = new Image();
myImages[ig].onload = preload_imgs;
myImages[ig].src = "pic" + ig + ".jpg";
ig++ ;
}

preload_imgs();
Click to expand...


Stephane,

I have used your code above (making var ig = 1 to start as the pics
are named pic1) .... but the problem seems to be that I cannot have 2
items in the <body onload etc>
Click to expand...

did you see that :
preload_imgs();
was allready called
just after its own declaration ...

so, no need to call it once more (in body tag or otherwhere)
I have

<body onload="preload_imgs()">
Click to expand...

delete that onload()
and let function preload_imgs() to run before (during ?) loading
<script>
mySlider1.placeSlider();
</script>

which gives the error message "object needed" for the line with
mySlider1.placeSlider();
Click to expand...

I do not know what mySlider1.placeSlider()
attempt to do ...
If you can't (or don't know how) modify it
and *if* you prefer to launch preload_imgs() after loading (body tag)

you can try :

<script>
onload = Function ('mySlider1.placeSlider()');
</script>

but I'm afraid that will not work (if preload_imgs() haven't run before)
if I have

<body onload="mySlider1.placeSlider()"> this is OK but I then get an
error in putting the first pic in the table - I guess the creation of
the table is happening before the pics have been loaded.

Any thoughts?!
Click to expand...

1) I think there was a little error in my proposition
(forgotten to stop images loading when last image has done)

var myImages = new Arrray();
var ig = 0;
var ig_max = 7;

function preload_imgs() {
if(ig <= ig_max) {
myImages[ig] = new Image();
myImages[ig].onload = preload_imgs;
myImages[ig].src = "pic" + (+ig+1) + ".jpg";
ig++ ;
}
}
preload_imgs();

2) To run function creating tables after images are all loaded
I don't know ...
because placeSlider() or writeSlider() are unknown
Do they create and write table(s) ?

var myImages = new Arrray();
var ig = 0;
var ig_max = 7;

function preload_imgs() {
if(ig <= ig_max) {
myImages[ig] = new Image();
myImages[ig].onload = preload_imgs;
myImages[ig].src = "pic" + (+ig+1) + ".jpg";
ig++ ;
}
else {
mySlider1.placeSlider(); // or mySlider1.writeSlider();
mySlider1.writeSlider(); // mySlider1.placeSlider();
document.getElementById('wait').style.display='none';
}
}

and in space for script launching mySlider1.placeSlider()
in end of page

<h2 id="wait" style="color:red">Waiting end of loading ... </h2>
<script type="text/javascript">
preload_imgs();
</script>

of course : no more redondant onloads by otherway ! !
 
A

ASM

Geoff said:
just do this

<body onload="preload_imgs();mySlider1.placeSlider();">
Click to expand...


Zoe,
I am using

<body onload="preload_imgs();mySlider1.placeSlider();">

but I keep getitng the error

'myImages[..].src' is null or not an object.
Click to expand...

because
- 1 - preload_imgs() didn't finish it's job
as soon as mySlider1.placeSlider() is called
- 2 - perhaps preload_imgs() has no end ?
How do I test to see that the preload_imgs() is working?
Click to expand...

var myImages = new Arrray();
var ig = 0;
var ig_max = 7;

function preload_imgs() {
if(ig <= ig_max) {
if(ig!=0) alert('image : '+ig+' loaded');
myImages[ig] = new Image();
myImages[ig].onload = preload_imgs;
myImages[ig].src = "pic" + (+ig+1) + ".jpg";
ig++ ;
}
}
preload_imgs();
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

JQuery - Preloading Images 0
preloading images... 0
Create a Random Number to offset linked images 2
Image preload problem 0
Preload images still reloading from server? 2
preloading images 2
Help with preloading images 2
Preloading Images 4

Members online

Total: 68 (members: 2, guests: 66)
Robots: 455

Forum statistics

Threads
473,982
Messages
2,570,190
Members
46,736
Latest member
zacharyharris

Latest Threads

Top