settimeout needs alert() ???

[Joris Lambrecht]

Hi people,

Please take a look at the issue i talk about below. (yes i do realise such
functions are publicaly available)

The page i'm using uses JSON defined array of image files with
information for the title property of the img tag.

The functions i wrote below are sort of working since it needs an alert()
to work the slides ???

function slideshow ( dbname ) {

var dspitem = document.getElementById("bodybox");
var fotodb = eval(dbname);
var item = 0;
var dblength = dbname.length -3 ;

content = "<img src=img/foto/"+fotodb.foto[item].picture+" title="+fotodb.foto[item].name+" width=100% height=540px>";

slider ();

function slider () {
for (item = 0; item <= dblength; item++){ dspitem.innerHTML = "<img src=img/foto/"+fotodb.foto[item].picture+" title="+fotodb.foto[item].name+" width=100% height=540px>";
alert('temporary failure');
}

setTimeout ("slider();", 500);
}

}

Thank you for your advice and consideration.

Joris

 

[RobG]

Hi people,

Please take a look at the issue i talk about below. (yes i do realise such
functions are publicaly available)

The page i'm using uses JSON defined array of image files with
information for the title property of the img tag.

The functions i wrote below are sort of working since it needs an alert()
to work the slides ???

function slideshow ( dbname ) {

var dspitem = document.getElementById("bodybox");

It helps greatly if you indent code with two or four spaces. The
easier you make it for others, the more likely you are to get replies.

var fotodb = eval(dbname);

A sample of the dbname file structure would help. The idea behind
using eval with JSON is that you retrieve the text using AJAX or
similar. In this case, why not just decalre it as a variable? You can
put it in a separate script file if you like, the use of JSON seems to
be just an excuse to use eval.

var item = 0;
var dblength = dbname.length -3 ;

content = "<img src=img/foto/"+fotodb.foto[item].picture+" title="+fotodb.foto[item].name+" width=100% height=540px>";

slider ();

function slider () {

By declaring slider() inside slidshow(), you make it local and hence
not available to calls made from the global scope (which is where
setTimeout runs from).

for (item = 0; item <= dblength; item++){ dspitem.innerHTML = "<img
src=img/foto/"+fotodb.foto[item].picture+" title="+fotodb.foto[item].name+" width=100%

Using innerHTML is less than optimal, create an img element in the HTML
and use script to replace the src and title attributes. Ensure a
default is loaded so anyone with script disabled or not available will
at least see something.

Also, you should quote attribute values - it's not always necessary and
some here argue you should only do it when it is, but it's much simpler
to just quote them always.

Finally, don't allow posted code to auto-wrap. Manually wrap it at
about 70 characters and ensure it 'works' (or at least displays the
issue) when copied and pasted into a test page.

height=540px>";

Each time the loop runs, it will completely replace the content of
dspitem. Considering it will run a few thousand times a second (at
least, in an average PC), the content is almost certainly replaced
before any of the images starts to download and therefore none of them
are downloaded completely (many will not even start to download).

alert('temporary failure');

This will cause each loop to pause and probably allow the screen to
update, hence you see the images.

}

setTimeout ("slider();", 500);

setTimeout runs in a global scope and so has no access to slider(),
which is local to slideshow(). You will get a 'slider is not defined'
error or similar.

The alert will make the script pause and display each image once, but
that's it.

}

}

The usual strategy is to load all of the images in to an array of image
objects, then use setTimeout to get the src attribute of an image in
the array and use it to change the src attribute of an image element
somewhere in the page.

Ensure that the image array object is persistant (e.g. make it global),
otherwise it won't properly preload the images.