JS fader hängt mit IE

[chili-con-carne]

hallo zusammen

hoffe es kann mir jemand helfen - verzweifle hier gerade und muss eine seite schnellstmöglich hochladen...

hier also das problem:

ich hab einen fader auf meiner seite und dieses verflixte ding bleibt im IE einfach beim zweiten bild stehen für ca 10sek (nur bei IE!!) obwohl auf 2sek eingestellt. an der bildgrösse kanns nicht liegen da auf safari, firefox ect kein problem. es gibt mir auch im IE eine fehlermeldung auf der entsprechenden zeile im body. irgendwo ist also da der wurm drin.. nur wo?!?!

hoffe echt jemand kann mir hier helfen und bedanke mich im voraus ganz, ganz herzlich

eure verzweifelte
chili


die seite mit dem problem:
André Joe Coiffure und Hair-Spa im Hauptbahnhof Zürich

hier was im head ist

<script type="text/javascript" src="fader-framework/fader-framework.js"></script>
		<script type="text/javascript">
			// Fader links
			FaderFramework.init({
				id: "fader_test_1",
				images: [
					"images/coiffure_andrejoe_hauptbahnhof_zurich_bild0.jpg",
					"images/coiffure_andrejoe_hauptbahnhof_zurich_bild1.jpg",
					"images/coiffure_andrejoe_hauptbahnhof_zurich_bild2.jpg",
					"images/coiffure_andrejoe_hauptbahnhof_zurich_bild3.jpg",
					"images/coiffure_andrejoe_hauptbahnhof_zurich_bild1.jpg",
					"images/coiffure_andrejoe_hauptbahnhof_zurich_bild2.jpg"
				],
				fadeStep: 1,
				random: true
			});

		</script>

und im body:

<img src="images/coiffure_andrejoe_hauptbahnhof_zurich_bild0.jpg" id="fader_test_1" onload="MM_preloadImages('images/coiffure_andrejoe_hauptbahnhof_zurich_bild0.jpg','images/andrejoe_hauptbahnhof_zurich_bild1.jpg','images/andrejoe_hauptbahnhof_zurich_bild2.jpg','images/andrejoe_hauptbahnhof_zurich_bild3.jpg')" />

und noch das js

// JavaScript Document

var FaderFramework = {

    oldWinOnLoad: false,
    inits: new Array(),
    faders: new Object(),

    init: function (einstellungen) {
        var fader;

        if (this.inits) {
            this.inits[this.inits.length] = einstellungen;

        } else {
            fader = new this.Fader(einstellungen);
 			fader.viewTime = 1000;
            if (fader != false && !this.faders[fader.id]) {
                this.faders[fader.id] = fader;
                window.setTimeout(function () {    fader.next(); }, fader.viewTime);
            }
        }
    },

    start: function () {
        this.oldWinOnLoad = window.onload;

        window.onload = function () {
            if (typeof(FaderFramework.oldWinOnLoad) == "function") {
                FaderFramework.oldWinOnLoad();
            }
            FaderFramework.onload();
        };
    },

    onload: function () {
        var i, fader, e = document.createElement("link");
        e.type = "text/css";
        e.rel = "stylesheet";
        e.href = "fader-framework/fader-framework.css";
        document.getElementsByTagName("head")[0].appendChild(e);

        fader = this.inits;
        delete this.inits;

        for (i = 0; i < fader.length; i++) {
            this.init(fader[i]);
        }
    },

    Fader: function (einstellungen) {
        if (!einstellungen.id || !document.getElementById(einstellungen.id)
            || FaderFramework.faders[einstellungen.id]
            || einstellungen.images.length < 2) {

            return new Boolean(false);
        }

        var i, original = document.getElementById(einstellungen.id);

        this.id = einstellungen.id;
        this.images = new Array();
        this.counter = false;

        this.element = document.createElement("span");
        this.element.className = "fader";
        original.parentNode.replaceChild(this.element, original);

        for (i = 0; i < einstellungen.images.length; i++) {
            this.images[i] = document.createElement("img");
            this.images[i].src = einstellungen.images[i];
            this.images[i].alt = "Bild";

            if (i == 0) {
                this.element.appendChild(this.images[i]);
            }
        }

        this.fade = function (step) {
            var fader = this, imgs = this.element.getElementsByTagName("img");

            step = (!step) ? 0 : step;

            imgs[1].style.opacity = step/800;
            imgs[1].style.filter = "alpha(opacity=" + step + ")"; // IE?

            step = step + 2;

            if (step <= 800) {
                window.setTimeout(function () { fader.fade(step); }, 1);
            } else {
                imgs[1].className = "";
                this.element.removeChild(imgs[0]);
                window.setTimeout(function () { fader.next(); }, 2000);
            }
        };

        this.next = function () {
            this.counter = (this.counter < this.images.length -1) ? this.counter +1 : 0;

            this.element.appendChild(this.images[this.counter]);
            this.images[this.counter].className = "next";
            this.fade();
        };
    }
};

FaderFramework.start();

 

[vitus37]

Die Funktion MM_preloadImages() ist - soweit ich weiß - von Macromedia. Ihre Definition wird von z.B. Dreamweaver automatisch in den HTML-Quelltext eingefügt (nicht jedoch bei dir).

Da die Funktion also nicht existiert, werden die Bilder nicht vor-, sondern sehr kurzfristig geladen, wodurch es zu den Verzögerungen kommt. Nutzt du DW? - Damit sollte sich das einstellen lassen.

 

[Gilles]

Die Funktion MM_preloadImages() ist - soweit ich weiß - von Macromedia. Ihre Definition wird von z.B. Dreamweaver automatisch in den HTML-Quelltext eingefügt (nicht jedoch bei dir).

Da die Funktion also nicht existiert, werden die Bilder nicht vor-, sondern sehr kurzfristig geladen, wodurch es zu den Verzögerungen kommt. Nutzt du DW? - Damit sollte sich das einstellen lassen.

Wie vitus erwähnte, fehlt hier die MM_preloadImages Funktion und zweitens könnte es Probleme mit dem window onload geben.
Denn das <body onload> überschreibt window.onload. Ich würde im Produktiveinsatz nicht mit window.onload bzw <body onload> arbeiten. Es gibt zwei Methoden, die für das anhängen von neuen Eventlistenern zuständig sind. Bei IE ist es attachEvent und bei Firefox war es glaub ich addEventListener. Hier mal einen link, den ich auf die schnelle gefunden habe: Javascript event listener und attachEvent
Da ich viel mit JQuery arbeite und dieses das Eventhandling für mich überinmmt, kann ich dir da leider nichts näheres dazu sagen, nur dass diese Methoden Events noch zusätzlich anhängen und diese nicht überschreiben :)

 

[chili-con-carne]

danke euch beiden schon mal recht herzlich!

am preload liegt es nicht - da haben wir alles durchgecheckt und neu gemacht. ausserdem gehts ja auf den anderen browsern. neu haben wir die übergangszeit runtergeholt - jetzt iest es so, dass es bei einigen geht auf IE und bei andere nicht. alle haben aber dieselbe version(!). cache auch gelöscht. verschnellern geht auch nicht, da sonst die bilder rasen...

jquery ist nicht schlecht, aber wäre froh wenn es so irgendwie eine lösung gibt. alles neu machen muss nicht unbedingt sein.

@ gilles: leider komme ich nicht ganz nach was du hier meinst...

Ich würde im Produktiveinsatz nicht mit window.onload bzw <body onload> arbeiten. Es gibt zwei Methoden, die für das anhängen von neuen Eventlistenern zuständig sind. Bei IE ist es attachEvent und bei Firefox war es glaub ich addEventListener. Hier mal einen link, den ich auf die schnelle gefunden habe: Javascript event listener und attachEvent

. scheint also nicht so, als ob ich einfach <body onload>mit was anderem erstezen kann, oder?

bin hier leider zu wenig versiert und steh ein bisschen (besser gesagt ziemlich) auf dem schlauch. sorry :-( habt ihr vielleicht einen konkreteren tipp auf lager für mich den ich ev. umsetzen kann?

hier wäre der neue link auf neuem server damit ihr wisst was ich meine André Joe Coiffure und Hair-Spa im Hauptbahnhof Zürich


und hier wie es neu ist:

<script type="text/javascript" src="fader-framework/fader-framework.js"></script>
<script type="text/javascript">
// Fader links
FaderFramework.init({
id: "fader_test_1",
images: [
"images/coiffure_andrejoe_hauptbahnhof_zurich_bild0.jpg",
"images/coiffure_andrejoe_hauptbahnhof_zurich_bild1.jpg",
"images/coiffure_andrejoe_hauptbahnhof_zurich_bild2.jpg",
"images/coiffure_andrejoe_hauptbahnhof_zurich_bild3.jpg",
"images/coiffure_andrejoe_hauptbahnhof_zurich_bild1.jpg",
"images/coiffure_andrejoe_hauptbahnhof_zurich_bild2.jpg"
],
fadeStep: 1,
random: true
});
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}
</script>

sowie:

// JavaScript Document

var FaderFramework = {

oldWinOnLoad: false,
inits: new Array(),
faders: new Object(),

init: function (einstellungen) {
var fader;

if (this.inits) {
this.inits[this.inits.length] = einstellungen;

} else {
fader = new this.Fader(einstellungen);
fader.viewTime = 1000;

if (fader != false && !this.faders[fader.id]) {
this.faders[fader.id] = fader;
window.setTimeout(function () { fader.next(); }, fader.viewTime);
}
}
},

start: function () {
this.oldWinOnLoad = window.onload;

window.onload = function () {
if (typeof(FaderFramework.oldWinOnLoad) == "function") {
FaderFramework.oldWinOnLoad();
}
FaderFramework.onload();
};
},

onload: function () {
var i, fader, e = document.createElement("link");
e.type = "text/css";
e.rel = "stylesheet";
e.href = "fader-framework/fader-framework.css";
document.getElementsByTagName("head")[0].appendChild(e);

fader = this.inits;
delete this.inits;

for (i = 0; i < fader.length; i++) {
this.init(fader);
}
},

Fader: function (einstellungen) {
if (!einstellungen.id || !document.getElementById(einstellungen.id)
|| FaderFramework.faders[einstellungen.id]
|| einstellungen.images.length < 2) {

return new Boolean(false);
}

var i, original = document.getElementById(einstellungen.id);

this.id = einstellungen.id;
this.images = new Array();
this.counter = false;

this.element = document.createElement("span");
this.element.className = "fader";
original.parentNode.replaceChild(this.element, original);

for (i = 0; i < einstellungen.images.length; i++) {
this.images = document.createElement("img");
this.images.src = einstellungen.images;
this.images.alt = "Bild";

if (i == 0) {
this.element.appendChild(this.images);
}
}

this.fade = function (step) {
// if (step==0) alert("fade aufgerufen mit step = "+ step);
var fader = this, imgs = this.element.getElementsByTagName("img");

step = (!step) ? 0 : step;

imgs[1].style.opacity = step/400;
imgs[1].style.filter = "alpha(opacity=" + step + ")"; // IE?

step = step + 2;
if (step <= 400) {
// document.title = "Step=" + step;
window.setTimeout(function () { fader.fade(step); }, 1);
} else {
// alert("step=" + step);
imgs[1].className = "";
this.element.removeChild(imgs[0]);
window.setTimeout(function () { fader.next(); }, 2000);
}
};

this.next = function () {
// alert("next aufgerufen");
this.counter = (this.counter < this.images.length -1) ? this.counter +1 : 0;

this.element.appendChild(this.images[this.counter]);
this.images[this.counter].className = "next";
// this.fade();
this.fade(0);
};
}
};

FaderFramework.start();