ImageCrossFade

[Hagen]

Hallo,

ich würde gern das hier auf meiner Seite einbinden:
http://slayeroffice.com/code/imageCrossFade/xfade2.html

Nur stört mich das die Bilder während des Ladens noch untereinander angeordnet sind und erst wenn alle Bilder fertig geladen sind, übereinander hüpfen. Hat jemand eine Idee wie ich das beheben kann?

Habe schon etliches (overflow:hidden, max-width, min-width) probiert aber es hat nichts funktioniert.

Würde mich über eine Antwort freuen.

VG Hagen

[Thomas Luethi]

Hallo,

ich würde gern das hier auf meiner Seite einbinden:
http://slayeroffice.com/code/imageCrossFade/xfade2.html
Nur stört mich das die Bilder während des Ladens noch untereinander angeordnet sind und erst wenn alle Bilder fertig geladen sind, übereinander hüpfen. Hat jemand eine Idee wie ich das beheben kann?

Ich habe das kürzlich hier - leicht abgewandelt - verwendet:
http://www.reportair.ch/

Auf den DIV mit den Bildern wende ich overflow:hidden an.
Und ich gebe ihm feste Dimensionen (width/height), da die
enthaltenen Bilder alle genau gleich gross sind.
Das reichte IIRC, um den von Dir beschriebenen Effekt zu vermeiden.

Im HTML steht bei mir nur das erste Bild. Die weiteren IMG-Tags
schreibe ich mit JavaScript - mit document.write() - rein.
(Je nach Bildschirmgrösse werden kleinere oder grössere Bilder
angezeigt. Darum ist es ein etwas komplexes JavaScript-Konstrukt.)

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

Vielleicht hilft Dir das ja weiter.

Freundliche Grüsse
Thomas

[nemoinho]

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.

[Hagen]

Super, Vielen Dank euch Beiden, habe das Problem mit einer Mischung aus euren beiden Antworten kösn können.

VG Hagen

[molily]

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

[Thomas Luethi]

Hallo Mathias,

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, ...

Im von mir genannten Beispiel http://www.reportair.ch/ handelt
es sich um die Startseite einer Website.
Bei eingeschaltetem JavaScript soll dort eine Auswahl von Bildern
an der gleichen Stelle nacheinander ein- und ausgeblendet werden.
Bei ausgeschaltetem JavaScript soll bewusst nur 1 Bild angezeigt werden,
und eben nicht eine Auflistung von vielen grossen Bildern.

In der Galerie (mit Thumbnails) sind dann alle Bilder selbstverständlich
auch ohne JavaScript zugänglich. (JavaScript/CSS wird dort nur zu optischen
Zwecken verwendet, um - bei genügend grossen Bildschirmen - das grosse Bild
horizontal und vertikal im Viewport zu zentrieren.)

... oder auf DOMContentLoaded-Techniken ausweichen.

Hast Du dazu gerade einen guten Link zur Hand?

Freundliche Grüsse
Thomas