das problem ist wie die datei "xfade2.css" vom Javascript eingebunden wird,
denn die datei wird in Zeile 29 innerhalb der init-funktion eingebunden, diese init-funktion wird mittels des event-handlers 'onload' aufgerufen (Zeile 16), dass heißt die Seite und alle hartkodierten stylesheets werden erstmal geladen bevor das Script die init-funktion ausführt mitunter kann dadurch dieses aufblitzen der Bilder entstehen, die einfachste Lösung dieses Problems ist das stylesheet direkt ins html zu schreiben, aber ich denke das ist nicht in deinem Sinne wegen verfügbarkeit usw. daher würde ich einfach eine kleine funktion im javascript schreiben deren einzige aufgabe es ist das stylesheet zu implementieren, das sähe dann so aus:

  
function addStyle(){  
  var css = document.createElement('link');  
  css.setAttribute('href','xfade2.css');  
  css.setAttribute('rel','stylesheet');  
  css.setAttribute('type','text/css');  
  document.getElementsByTagName('head')[0].appendChild(css);  
}  
addStyle();  

hierbei wird das Stylesheet in den head geschrieben, sobald das Javascript geladen wird, und somit BEVOR die Bilder geladen werden und untereinander aufblitzen.

Hallo,

Das heisst: ohne JavaScript gibt es einfach nur das eine Bild.
Mit JavaScript gibt es auch die andern Bilder, die dann nacheinander
eingeblendet werden.

Der Sinn von "unobtrusive DOM scripting" ist ja gerade, dass alle Inhalte ohne JavaScript zugänglich bleiben und sich das Script hinzuschaltet. Dahinter sollte man nicht zurückfallen. Also besser Styles mit JavaScript einbinden, die die folgenden Bilder verstecken, oder auf DOMContentLoaded-Techniken ausweichen. Um die kommt man, wenn man vernünftiges und zeitgemäßes JavaScript schreibt, ohnehin nicht herum.

Mathias