Hallo Leute,
kein Tag ohne Frage :-) Ich habe mir mit JS eine kleine Slidefunktion für meine Bildergalerie gebaut. Per Klick auf den Vor- oder Zurück-Button rufe ich die Funktion slideBilde auf, mit der ich ein neues <img> erzeuge und lade. Nach Fertigladen füge ich das Bild hinter oder vor dem schon vorhandenen Bild ein und schiebe mit ihm das alte Bild weg. Danach entferne ich das alte Bild aus dem DOM. Und so weiter...
Hier mal die stark verkürzte Funktion, ich hoffe ich habe nichts Wichtiges weggelassen:
var slideBild = function () {
var img = $('<img/>');
img.attr('src','bild.jpg');
img.on('load', function() {
img.insertBefore('#bild');
$('#fenster > div').animate ( { left: 0} );
});
};
Nun habe ich noch eine andere Funktion, mir der ich per Index direkt zu einem bestimmten Bild springen kann. In dem Fall tausche ich nur das src-Attribut aus. In dieser Funktion gibt es keine Animation. Dennoch wird das neue Bild animiert. Und zwar wohl weil hier auch wieder das img.on(load) greift. Dasselbe passiert auch wenn ich die Seite einfach bloß riefresche, auch da schwuppt das Bild vor dem Neuaufbau nochmal weg.
Mich verwirrt dieses Verhalten etwas, weil ich dachte, dass img.on(load) gilt nur innerhalb der slideBild-Funktion. Aber offenbar greift das Mistvieh wohl global. Um das load-Event nur auf das eine gerade neu erstellte Bild zu beschränken, hab ich mal zusätzlich eine id="neu" vergeben und diese im on(load) als Selektor mit angegeben und das Event beim übergeordneten div registriert. Aber damit reagiert das Event nun überhaupt nicht mehr.
var slideBild = function () {
var img = $('<img/>');
img.attr('src','bild.jpg');
img.attr('id', 'neu');
$('div').on('load', '#neu', function() {
img.insertBefore('#bild');
$('#fenster > div').animate ( { left: 0},
function() {
img.removeAttr('id');
}
);
});
};
Was mach ichn schon wieder falsch?
Gruß
Onkel Schnitzel