problem mit setTimeout - angezeigte seite wird überschrieben

[crazylobster]

hi leute,

habe ein problem mit setTimeout. und zwar habe ich eine slideshow, die nach einem fade-effekt (mootools) eingeblendet wird. das klappt soweit auch. der haken ist, dass während des fade-vorgangs schon eine gewisse zeit vergeht, sodass das erste bild der galerie nur kurz erscheint. das ist nervig. deswegen möchte ich die galerie mit setTimeout erst verzögert starten. das klappt aber überhaupt nicht. die slideshow überschreibt meine seite und wird auf weissem hintergrund geöffnet. was kann ich tun? gibt es einen anderen weg, soll ich die galerie selber anpassen? weiß nur leider nicht wie? :(

hier mein code:

so will ich die galerie verzögert ausführen...
setTimeout(function(){new fadeshow(fadeimages, 948, 292, 0, 5000, 1, "R");},1000);

meine slideshow:

/***********************************************  
* Ultimate Fade-In Slideshow (v1.51): © Dynamic Drive (http://www.dynamicdrive.com)  
* This notice MUST stay intact for legal use  
* Visit http://www.dynamicdrive.com/ for this script and 100s more.  
***********************************************/  
  
var fadeimages=new Array()  
//SET IMAGE PATHS. Extend or contract array as needed  
fadeimages[0]=["media/images/home/newsNewBalance.png", "?category=work&name=newbalance", ""] //plain image syntax  
fadeimages[1]=["media/images/home/newsHatakeBlog.jpg", "http://blog.hatake.de/", ""] //plain image syntax  
fadeimages[2]=["media/images/home/newsNewBalance2.jpg", "?category=work&name=newbalance", ""] //plain image syntax  
fadeimages[3]=["media/images/home/newsAndreasBintz.jpg", "?category=work&name=andreasbintz", ""] //plain image syntax  
  
var fadebgcolor="white"  
  
////NO need to edit beyond here/////////////  
  
var fadearray=new Array() //array to cache fadeshow instances  
var fadeclear=new Array() //array to cache corresponding clearinterval pointers  
  
var dom=(document.getElementById) //modern dom browsers  
var iebrowser=document.all  
  
function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){  
this.pausecheck=pause  
this.mouseovercheck=0  
this.delay=delay  
this.degree=10 //initial opacity degree (10%)  
this.curimageindex=0  
this.nextimageindex=1  
fadearray[fadearray.length]=this  
this.slideshowid=fadearray.length-1  
this.canvasbase="canvas"+this.slideshowid  
this.curcanvas=this.canvasbase+"_0"  
if (typeof displayorder!="undefined")  
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)  
this.theimages=theimages  
this.imageborder=parseInt(borderwidth)  
this.postimages=new Array() //preload images  
for (p=0;p<theimages.length;p++){  
this.postimages[p]=new Image()  
this.postimages[p].src=theimages[p][0]  
}  
  
var fadewidth=fadewidth+this.imageborder*2  
var fadeheight=fadeheight+this.imageborder*2  
  
if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)  
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')  
else  
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')  
  
if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox  
this.startit()  
else{  
this.curimageindex++  
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)  
}  
}  
  
function fadepic(obj){  
if (obj.degree<100){  
obj.degree+=10  
if (obj.tempobj.filters&&obj.tempobj.filters[0]){  
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+  
obj.tempobj.filters[0].opacity=obj.degree  
else //else if IE5.5-  
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"  
}  
else if (obj.tempobj.style.MozOpacity)  
obj.tempobj.style.MozOpacity=obj.degree/101  
else if (obj.tempobj.style.KhtmlOpacity)  
obj.tempobj.style.KhtmlOpacity=obj.degree/100  
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)  
obj.tempobj.style.opacity=obj.degree/101  
}  
else{  
clearInterval(fadeclear[obj.slideshowid])  
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"  
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)  
obj.populateslide(obj.tempobj, obj.nextimageindex)  
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0  
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)  
}  
}  
  
fadeshow.prototype.populateslide=function(picobj, picindex){  
var slideHTML=""  
if (this.theimages[picindex][1]!="") //if associated link exists for image  
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'  
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'  
if (this.theimages[picindex][1]!="") //if associated link exists for image  
slideHTML+='</a>'  
picobj.innerHTML=slideHTML  
}  
  
fadeshow.prototype.rotateimage=function(){  
if (this.pausecheck==1) //if pause onMouseover enabled, cache object  
var cacheobj=this  
if (this.mouseovercheck==1)  
setTimeout(function(){cacheobj.rotateimage()}, 100)  
else if (iebrowser&&dom||dom){  
this.resetit()  
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)  
crossobj.style.zIndex++  
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)  
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"  
}  
else{  
var ns4imgobj=document.images['defaultslide'+this.slideshowid]  
ns4imgobj.src=this.postimages[this.curimageindex].src  
}  
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0  
}  
  
fadeshow.prototype.resetit=function(){  
this.degree=10  
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)  
if (crossobj.filters&&crossobj.filters[0]){  
if (typeof crossobj.filters[0].opacity=="number") //if IE6+  
crossobj.filters(0).opacity=this.degree  
else //else if IE5.5-  
crossobj.style.filter="alpha(opacity="+this.degree+")"  
}  
else if (crossobj.style.MozOpacity)  
crossobj.style.MozOpacity=this.degree/101  
else if (crossobj.style.KhtmlOpacity)  
crossobj.style.KhtmlOpacity=this.degree/100  
else if (crossobj.style.opacity&&!crossobj.filters)  
crossobj.style.opacity=this.degree/101  
}  
  
  
fadeshow.prototype.startit=function(){  
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)  
this.populateslide(crossobj, this.curimageindex)  
if (this.pausecheck==0){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER  
var cacheobj=this  
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)  
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}  
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}  
}  
this.rotateimage()  
}

hoffe, jemand hat ne idee!
greetz

[Cheatah]

Hi,

die slideshow überschreibt meine seite und wird auf weissem hintergrund geöffnet. was kann ich tun?

auf document.write() verzichten, nachdem das Dokument bereits zuende geschrieben worden war.

Cheatah

[crazylobster]

auf document.write() verzichten, nachdem das Dokument bereits zuende geschrieben worden war.

das dachte ich mir schon. habe aber nur ein vorgefertigstes script benutzt und habe keine ahnung wie ich das verändere? einfach statt document.write() nen anderen befehl??

[Felix Riesterer]

Lieber crazylobster,

habe aber nur ein vorgefertigstes script benutzt und habe keine ahnung wie ich das verändere?

das ist ungünstig. Wieviel Verständnis von JavaScript hast Du schon?

einfach statt document.write() nen anderen befehl??

Nein, so einfach ist das nicht. Aber Du könntest Anregungen aus dem JavaScript-Artikel zum Fader-Framework bekommen, das sich auch mit Änderungen am DOM nach dem Ladevorgang auseinandersetzt.

Liebe Grüße,

Felix Riesterer.

[Felix Riesterer]

Lieber crazylobster,

hier mein code: [... Code ...]

wie man ein Projekt in JavaScript sinnvoll aufbaut, kannst Du in einem SELFHTML-Aktuell-Artikel nachlesen: Fader-Framework - kleiner Lehrgang zum vernünftigen Schreiben eines JavaScripts

In diesem Artikel siehst Du auch, wie man Teile einer Seite sinnvoll verändert. Die Methode document.write() solltest Du meiden, wie der Teufel das Weihwasser, da sie mehr Probleme macht, als sie löst. Zumindest nach dem Laden der Seite...

Liebe Grüße,

Felix Riesterer.