nicht angemeldet
Hi Gernot,
dein Ansatz sieht ungefähr genauso aus wie meiner, nur bin ich nicht auf window.onload gekommen. Wie gesagt, bei mir "scheint" es daran zu scheitern, dass die complete Eigenschaft wohl nicht mit Image Objekten arbeitet, sondern nur mit real existierenden Tags. Zumindest sah das für mich so aus.
Ich habe das Problem letzte Nacht noch gelößt, hatte bereits bei meinem Posting so ein Gefühl... Ich habe einfach beide Ansätze kombiniert.
Jedes Bild der Slideshow wird in einem 1 x 1px großem unsichtbarem Div geladen. Wichtig ist natürlich overflow:hidden. Jedesmal, wenn die Routine zum wechseln der Bilder aufgerufen wird, fragt sie vorher eine Prüfroutine, ob denn dieses Bild geladen ist (Wo complete dann sehr gut arbeitet, scheinbar wirklich, weil ich jetzt "echte" Bilder habe, und nicht Image Objekte). Ist das Bild geladen, wird ordentlich ausgetauscht, und wieder ein Timeout gesetzt. Wenn nicht, ruft sich die Routine einige Millisekunden selbst wieder auf und versucht wieder das Bild zu wechseln.
Einziger wirklicher Nachteil dabei ist, dass die onload Funktion des Bodys unbrauchbar wird, weil er ewig lädt (bis alle Bilder geladen sind). Aber damit kann ich glaub ich leben.
Letzten Endes war es eigentlich so einfach, dass es mir peinlich ist, das ganze als Frage gepostet zu haben ;-)
Falls es jemanden interessiert, hier der Quelltext des ganzen, in noch sehr unreiner Form ;-)
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" />
<titleDiashow</title>
<script type="text/javascript">
var ImgArr = new Array("NAME","ID", "VIEWED"); ImgArr["NAME"] = new Array("Blick auf Granada","Häuser in Granada","Iglesia de Santa Ana ","Eingang zu einem versteckten Garten","Versteckter Innenhof in Granada","Sternenhimmel","Licht und Schatten","Blick von der Alhambra auf den Stadtteil Albaicin ","Die Alhambra Grande","Die Gärten des Generalife von aussen","Die Gärten des Generalife ","Besuch in den Gärten","In den Gärten","In den Gäerten","Sabine in den Gärten des Generalife","Hübscher Brunnen mit interessanter Form","Es war einmal ....","Weitere kleine Gärten auf dem Weg durch die Medina","","","Sabine in der Medina","Ich in der Medina","Blick auf die Alcazaba","Tiefe Ruinen in der Alcazaba","Eingangsraum in den Nasridischen Palästen","Kleiner Brunnen im Myrtenhof","Schöne Blumenornamente ","Schriftornamente ","Fantastisch verzierte Bögen in den Nasridischen Palästen","Kuppel in der Sala de los Abencerrajes.","Endlich, der berühmte Löwenhof","Der Löwenbrunnen","Detail des Löwenhofs","Schöner Brunnen in den Nasridischen Palästen","Der Brunnen aus der Nähe","Alabasterbrunnen","Der Ladies Tower","Garten Alhambra","Garten Alhambra","Kleiner Rosengarten"); ImgArr["ID"] = new Array("77","78","79","80","81","82","83","84","85","86","87","88","89","90","91","92","93","94","95","96","97","98","99","100","101","102","103","104","201","202","203","204","205","206","207","208","209","210","211","212"); ImgArr["VIEWED"] = new Array("14","25","17","12","8","2","5","6","11","2","2","3","2","2","2","0","1","1","1","0","2","5","1","1","2","1","1","2","0","0","3","1","2","1","2","1","2","2","8","1"); var ImgCount = 40; var Img = 0;
function customSize() { //if(document.getElementById('SlideImg').height > screen.height - 300) { document.getElementById('SlideImg').height = screen.height - 300; //} }
function startSlideshow() { window.setTimeout("nextImage()",7000); }
function isLoaded() { var ImageId = "Img" + Img; if(document.getElementById(ImageId).complete == true) { return true; } else { return false; } }
function nextImage() { if(Img == ImgCount - 1) { Img = -1; } Img++; if(isLoaded()) { ImageId = "Img" + Img; document.getElementById('SlideImg').src = document.getElementById(ImageId).src; document.getElementById('SlideImg').alt = document.getElementById(ImageId).alt; document.getElementById('ImgNum').innerHTML = (Img+1).toString(); document.getElementById('ImgNameBig').innerHTML = document.getElementById(ImageId).alt; document.getElementById('ImgNameSmall').innerHTML = document.getElementById(ImageId).alt; document.getElementById('ImgViewed').innerHTML = ImgArr["VIEWED"][Img]; window.setTimeout("nextImage()",7000); } else { Img--; window.setTimeout("nextImage()", 50); } } </script>
</head> <body onload=""> <div style="margin-top: 30px; text-align: center; width: 100%;"> <h1 id="ImgNameBig">Blick auf Granada</h1> <img id="SlideImg" src="/deliverImage.html?id=77" alt="Blick auf Granada" /><br /> <script type="text/javascript"> customSize(); startSlideshow(); </script>
<span id="ImgNum">1</span>/40 | <span id="ImgNameSmall">Blick auf Granada</span> | <span id="ImgViewed">14</span> mal angeschaut<br /> <div id="PreImgContainer" style="width: 1px; height: 1px; visibility: hidden; overflow: hidden;"> <img id="Img0" src="/deliverImage.html?id=77" alt="Blick auf Granada" />
<img id="Img1" src="/deliverImage.html?id=78" alt="Häuser in Granada" /> <img id="Img2" src="/deliverImage.html?id=79" alt="Iglesia de Santa Ana " /> <img id="Img3" src="/deliverImage.html?id=80" alt="Eingang zu einem versteckten Garten" /> <img id="Img4" src="/deliverImage.html?id=81" alt="Versteckter Innenhof in Granada" /> <img id="Img5" src="/deliverImage.html?id=82" alt="Sternenhimmel" /> <img id="Img6" src="/deliverImage.html?id=83" alt="Licht und Schatten" /> <img id="Img7" src="/deliverImage.html?id=84" alt="Blick von der Alhambra auf den Stadtteil Albaicin " /> <img id="Img8" src="/deliverImage.html?id=85" alt="Die Alhambra Grande" /> <img id="Img9" src="/deliverImage.html?id=86" alt="Die Gärten des Generalife von aussen" />
<img id="Img10" src="/deliverImage.html?id=87" alt="Die Gärten des Generalife " /> <img id="Img11" src="/deliverImage.html?id=88" alt="Besuch in den Gärten" /> <img id="Img12" src="/deliverImage.html?id=89" alt="In den Gärten" /> <img id="Img13" src="/deliverImage.html?id=90" alt="In den Gäerten" /> <img id="Img14" src="/deliverImage.html?id=91" alt="Sabine in den Gärten des Generalife" /> <img id="Img15" src="/deliverImage.html?id=92" alt="Hübscher Brunnen mit interessanter Form" /> <img id="Img16" src="/deliverImage.html?id=93" alt="Es war einmal ...." /> <img id="Img17" src="/deliverImage.html?id=94" alt="Weitere kleine Gärten auf dem Weg durch die Medina" /> <img id="Img18" src="/deliverImage.html?id=95" alt="" />
<img id="Img19" src="/deliverImage.html?id=96" alt="" /> <img id="Img20" src="/deliverImage.html?id=97" alt="Sabine in der Medina" /> <img id="Img21" src="/deliverImage.html?id=98" alt="Ich in der Medina" /> <img id="Img22" src="/deliverImage.html?id=99" alt="Blick auf die Alcazaba" /> <img id="Img23" src="/deliverImage.html?id=100" alt="Tiefe Ruinen in der Alcazaba" /> <img id="Img24" src="/deliverImage.html?id=101" alt="Eingangsraum in den Nasridischen Palästen" /> <img id="Img25" src="/deliverImage.html?id=102" alt="Kleiner Brunnen im Myrtenhof" /> <img id="Img26" src="/deliverImage.html?id=103" alt="Schöne Blumenornamente " /> <img id="Img27" src="/deliverImage.html?id=104" alt="Schriftornamente " />
<img id="Img28" src="/deliverImage.html?id=201" alt="Fantastisch verzierte Bögen in den Nasridischen Palästen" /> <img id="Img29" src="/deliverImage.html?id=202" alt="Kuppel in der Sala de los Abencerrajes." /> <img id="Img30" src="/deliverImage.html?id=203" alt="Endlich, der berühmte Löwenhof" /> <img id="Img31" src="/deliverImage.html?id=204" alt="Der Löwenbrunnen" /> <img id="Img32" src="/deliverImage.html?id=205" alt="Detail des Löwenhofs" /> <img id="Img33" src="/deliverImage.html?id=206" alt="Schöner Brunnen in den Nasridischen Palästen" /> <img id="Img34" src="/deliverImage.html?id=207" alt="Der Brunnen aus der Nähe" /> <img id="Img35" src="/deliverImage.html?id=208" alt="Alabasterbrunnen" /> <img id="Img36" src="/deliverImage.html?id=209" alt="Der Ladies Tower" />
<img id="Img37" src="/deliverImage.html?id=210" alt="Garten Alhambra" /> <img id="Img38" src="/deliverImage.html?id=211" alt="Garten Alhambra" /> <img id="Img39" src="/deliverImage.html?id=212" alt="Kleiner Rosengarten" /> </div> </div> </body> </html>
Etwas umfangreich, aber dafür der komplette Parsetree dabei :)
Vielen Dank an dich Gernot, werde deinen Ansatz jetzt auch nochmal ausprobieren!
Gruß
Phil
ie:{ fl:( br:> va:} ls:< fo:) rl:( n4:{ ss:) de:] js:| ch:? sh:( mo:) zu:)