Hallo zusammen
Ich bin kurz vor dem Verzweifeln. Ich habe auf meiner Page eine kleine Bildershow eingerichtet, welche durch ein fade-Script gestaltet wird. Dies funktioniert wunderbar im Firefox und im IE6, nur im IE8 werden mir die anderen JavaScripts nicht mehr geladen. Anscheinend bleibt er beim fade-Script hängen und kommt nicht weiter. Sobald ich die Einbindung des fade-Script auskommentiere, funktioniert alles wieder bestens. An was liegt das? Und wie könnte ich es beheben?
Besten Dank
Es handelt sich um dieses Script, welches ich im Internet fand und ein wenig abgeändert habe:
function imageLine()
{
var checkInterval = null,
imageLineInterval = null,
currentImage = -1;
/*
Variablen die man in
verschiedenen Funktionen benötigt
*/
images = new Array(
'instrumente/bass_klarinette.gif',
'instrumente/cornet.gif',
'instrumente/es_bass.gif',
'instrumente/euphonium.gif',
'instrumente/klarinette.gif',
'instrumente/oboe.gif',
'instrumente/piccolo.gif',
'instrumente/posaune.gif',
'instrumente/querfloete.gif',
'instrumente/saxophon.gif',
'instrumente/schlagzeug.gif',
'instrumente/trompete.gif'
// Diese Bilder sind die standard Windows XP Bilder
);
// Alle Bilder die angezeigt werden sollen
loadingImages = new Array();
// Dieses Array enthält später alle Objekte
this.run = function()
{
checkInterval = window.setInterval('this.checkIfLoaded();', 100);
// Alle 100 Millisekunden prüfen ob alle Bilder geladen sind
for(i = 0;i < images.length;i++)
{
image = images[i];
loadingImages.push(new Image);
loadingImages[i].src = image;
}
/*
Alle Images in dem Array einzeln Durchgehen.
Das Array für die Objekte mit den Objekten füllen.
Dem neuen Objekt die Url des momentanen Bildes geben.
*/
}
this.checkIfLoaded = function()
{
allLoaded = true;
for(i = 0;i < loadingImages.length;i++)
{
loadingImage = loadingImages[i];
if(!loadingImage.complete)
allLoaded = false;
}
/*
Alle Objekte durchgehen.
Prüfen ob das aktuelle Objekt / Bild geladen ist.
Falls nicht dann die Variable zur Prüfung auf false setzen
*/
if(allLoaded)
{
// Wenn alle Objekte / Bilder geladen sind
// Die Interval für das Prüfen löschen
window.clearInterval(checkInterval);
// Das erste Bild anzeigen
this.startImageLine();
// Die Funktion für das Bilder wechseln alle 10 Sekunden ausführen
window.setInterval('this.startImageLine();', 7000);
}
}
this.startImageLine = function()
{
this.showImage();
// Bild anzeigen
if(currentImage == (loadingImages.length - 1))
currentImage = 0;
else
currentImage += 1;
/*
Aktuelles Bild um eins hochzählen.
Sollte das momentane Bild genau so groß sein,
wie das Array dann wieder beim ersten anfangen.
*/
element = document.getElementById('imageline');
// Element für die Bilderanzeige
element.style.height = loadingImages[currentImage].height + 'px';
element.style.width = loadingImages[currentImage].width + 'px';
// Dem Element die Breite und Höhe des momentanen Bildes geben
element.style.backgroundImage = 'url(' + loadingImages[currentImage].src + ')';
// Dem Element das aktuelle Bild als Hintergrundbild setzen
window.setTimeout('this.hideImage();', 6000);
// Das Bild in 9,5 Sekunden ausblenden
}
this.hideImage = function()
{
element = document.getElementById('imageline');
for(i = 0;i <= 100;i++)
window.setTimeout('element.style.filter = "Alpha(opacity=' + (100 - i) + ')"; element.style.MozOpacity = ' + (1 - i / 100) + '; element.style.opacity = ' + (1 - i / 100) + ';', i * 10);
// Von 0 bis 100 (Prozent)
// Das i * 5 dient dazu, dass das Ausblenden nicht zu schnell geht
}
this.showImage = function()
{
element = document.getElementById('imageline');
for(i = 0;i <= 100;i++)
window.setTimeout('element.style.filter = "Alpha(opacity=' + i + ')"; element.style.MozOpacity = ' + i / 100 + '; element.style.opacity = ' + i / 100 + ';', i * 20);
// Hier das selbe wie bei hideImage
}
this.run();
}
window.onload = function()
{
imageLine();
}
