Image Load Event in IE

In einer kleinen Animation mit jQuery sollen bestimmte Aktionen ausgeführt werden, wenn Bilder geladen sind. Dazu habe ich ein Image Load Event verwendet:

$image1 = $('<img />').attr('src', circle1Img).attr('width', 250).attr('height', 250).
load( function() {
	$('#animation .circle-1 .image').html('');
	$('#animation .circle-1 .image').append($(this));
});

Das hat auch wunderbar funktioniert, außer im IE8 (vermutlich auch IE7), wobei sich der IE8 im Legacy Mode korrekt verhält. Wie meine Recherche ergab, wird das Load Event vorzeitig gefeuert, weil das Bild aus dem Browser-Cache geladen wird. Das ist aber nur im IE so (wen wundest es eigentlich noch). Ein Lösung fand ich im Blog von David Walsh. Damit es auch im IE funktioniert, muss das src-Attribut erst gesetzt werden, wenn das Load Event definiert ist:

$image1 = $('<img />').attr('src', circle1Img).attr('width', 250).attr('height', 250).
load( function() {
	$('#animation .circle-1 .image').html('');
	$('#animation .circle-1 .image').append($(this));
});
$image1.attr('src', circle1Static);

Das Problem tritt natürlich nicht auf, wenn man die Bilder nicht aus dem Cache lädt:

var circle1Img = 'fileadmin/templates/img/animcircle_01.gif?' + Math.floor(Math.random()*10000);

Kommentare sind geschlossen.