preloading images not working?

A

ASM

Geoff said:
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?
Click to expand...

to call myImages[1].src

document.images['Slider1RailImg'].src = eval(myImages[1]+'.src');

would if fix ?

Perhaps browser reaches site to only verify
if this image haven't be changed ?
 
A

ASM

Geoff said:
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?
Click to expand...

this page changing every second doesn't help to understand whatever in your code

how sendButton() is called ?
if you now the row of array, you must test on this row (index)

if(index_of_my_call <=6 ) sendButton();



if you do what I did give and if mySlider1.writeSlider();
does write this button : no problemo

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';
}
}
 
G

Geoff Cox

Zoe,

I do need the situation_number to be incremented so that the new image
associated with the new situation and the new question can be
displayed ... that's all.

Cheers

Geoff
 
G

Geoff Cox

On Thu, 15 Sep 2005 13:51:19 +0200, ASM

Stephane,

My aplogies for changing the code so much. The code below is the
latest. You will see the preload code is different and don't think all
is well yet as it still takes a while for the pic0.jpg to display and
whilst that is happening the user can click on the "Next" button and
cause an error.

Probably I need to reinsert your preload code but could you just look
to see if that would follow through OK.

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++;

if (situation_number < 7)
{
mySlider1.setValue(
(mySlider1.leftValue + mySlider1.rightValue) / 2 );
count=0;
fillTable();
} else {
if (button.parentNode
&& button.parentNode.removeChild) {

button.parentNode.removeChild(button);
}
saveIt();
}

}


}

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>
fillTable();
sendButton();
</script>


<SCRIPT>

mySlider1.writeSlider();

</SCRIPT>

</body>
</html>
 
G

Geoff Cox

Zoe,

I think I have what you suggest except that I have to take account of
the idea that when the last situation has been answered
(situation_number being 7), then I need to remove the Neext button and
call the saveIt() function in order to send the slide values to the
cgi script ... so

} else {

situation_number++;

if (situation_number < 7)
{
mySlider1.setValue( (mySlider1.leftValue +
mySlider1.rightValue) / 2 );
count=0;
fillTable();
if (button.parentNode && button.parentNode.removeChild)
{
button.parentNode.removeChild(button);
}
saveIt();
}

}

Geoff
 
A

ASM

Geoff said:
On Thu, 15 Sep 2005 13:51:19 +0200, ASM

Stephane,

My aplogies for changing the code so much.
Click to expand...

will ypu, at least one time,
tell me what do :
- mySlider1.placeSlider()
and
- mySlider1.writeSlider()

could you download that :
http://perso.wanadoo.fr/staphane.moriaux/truc/slider4.htm
and tell me if that would work


You seem to want treate on hundred problems together ...

Each time something begins to appear fixed
hop! you go to break it with changes otherwhere
or
changing some code otherwhere, forgetting fiew code was working
and re-inserting insteed old code we know it causes problem.
The code below is the
latest. You will see the preload code is different and don't think all
is well yet as it still takes a while for the pic0.jpg to display and
whilst that is happening the user can click on the "Next" button and
cause an error.
Click to expand...

it is not so difficult you can't fix it by yourself ?

myImages[z].src="pic" + (+z+1) + ".jpg";

gives :

myImages[0].src="pic1.jpg";

Probably I need to reinsert your preload code but could you just look
to see if that would follow through OK.
Click to expand...

as I allways don't know what is : mySlider1.writeSlider();
and because your code is so much tortured
I'm lost

I do not understand you have to write sendButton by javascript
while
it's so easy to hidde or undisplay this button
(correctly writted directly in html on the page)
when your counter of questions reaches last question ...

for all your job you need only two parameters
(or four with these categories added)

max_categories = 7;
actual_category = 0;
max_questions = 8;
actual_question = 0;

actual_question is :
- onload : index of first image, question, response
- during work : is the index the step we are
and same for 'actual_category' regardless to categories sub array

and only these 2 parameters are used in callings to
preload_images
display_question
display_response
display_image
allowing_display_new_question_button
allowing_display_send_button

changing the only variable 'max_question' and/or 'max_categories'
explain in one time to your code how many questions + responses + images
you'll want

The thing to do now is to clearly organize differents actions
along time
- declaration of global variables
actual_question, max_questions, questions_array, responses_array
- preload image : contain in end next action (feed table)
- feed the table (allready in hard html code) with
- 1st image
- 1st question
- 1st response (I didn't understand why response is displayed)
function to fedd the table, when its index reaches max_questions value
- un-display next question button if last question
- display send-button on last question

we have 2 quite very simple functions


I did stay here :

function next_question(button) {
slider_value[count] = lhs_questions[count];
count++;
if (count < max_questions)
{
document.getElementById('lhs_question').innerHTML = lhs_questions[count];
document.getElementById('rhs_question').innerHTML = rhs_questions[count];
document.images['Slider1RailImg'].src = Imgs[count].src;
}
else
blah ...
 
G

Geoff Cox

On Thu, 15 Sep 2005 17:42:56 +0200, ASM

Stephane,

I have uploaded a version which works OK - so you can get a better
idea of what in meant to happen - but it has no preload of the images.

http://www.micro-active.com/test/spa.htm

I tried your stephane4.htm - I needed to change the position of the
mySlider1.placeSlider() in order to get the slider images in the right
place - anyway hopefully the above link will help?!

Cheers

Geoff
 
A

ASM

Geoff said:
On Thu, 15 Sep 2005 17:42:56 +0200, ASM

Stephane,

I have uploaded a version which works OK - so you can get a better
idea of what in meant to happen - but it has no preload of the images.

http://www.micro-active.com/test/spa.htm
Click to expand...

in your function fillTable some errors with ' and "

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

and it is more much better like that :

document.getElementById('picture').src = window["picture"][situation_number].src;

but ... that need you re-arange the table to be filled

get back your spa file with its images pre-loaded :
http://perso.wanadoo.fr/stephane.moriaux/truc/spa.htm
(which can run from there ;-) )

I didn't fix all the little missing
use FireFox and its Add-on : Web Developer
I tried your stephane4.htm - I needed to change the position of the
mySlider1.placeSlider() in order to get the slider images in the right
place -
Click to expand...

and .. does it run ?

anyway hopefully the above link will help?!

yes, like that I can see what happens
 
G

Geoff Cox

On Fri, 16 Sep 2005 01:28:09 +0200, ASM

Stephane,

Many thanks - your code

var picture = new Array(7);
picture[0] = new Image(400,265); picture[0].src = "pic0.jpg";

etc

looks much neater!

Just one thought - is it possible to make the Next button appear after
the pic0.jpg image has been downloaded?

Cheers

Geoff
 

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: 23 (members: 2, guests: 21)
Robots: 225

Forum statistics

Threads
473,756
Messages
2,569,535
Members
45,007
Latest member
OrderFitnessKetoCapsules

Latest Threads

Top