Workaround: Eingebettetes Flash-Objekt verursacht Flackern beim Seitenwechsel
Es sind immer die eigentlich kleinen Details, für die man die meiste Zeit braucht. Eben hatte ich das Vergnügen, wieder eines zu entdecken: Mir fiel auf, dass das Navigieren durch die Seiten nicht so “weich” verlief wie ich das gerne gehabt hätte. Da ich momentan noch so gut wie keinen Inhalt auf den Seiten habe, wäre zu erwarten gewesen, dass große Teile des sichtbaren Bereichs beim Seitenwechsel einfach gleich bleiben. Das war aber leider nicht so, denn jedes Mal, wenn ich einen Link angeklickt habe hat Firefox die komplette Seite neu gezeichnet, was sich durch eine Art “Flackern” bemerkbar machte. ![]()
Also habe ich mich auf die Suche nach der Ursache gemacht. Die erste Überlegung war das Theme, aber auch ein kurzzeitiger Wechsel zum Original-Theme brachte nichts. Danach waren die Plugins dran, und tatsächlich: Mit komplett deaktivierten Plugins ging der Seitenwechsel wieder normal. Schließlich war der Übeltäter eingegrenzt, es lag scheinbar am Lastfm-Plugin. Nun produziert das aber auch nur HTML-Code, der in die Seite eingefügt wird… und zwar u.a. solchen zum Anzeigen der Flash-Objekte. Sobald die entsprechenden object-Codes auskommentiert waren, war das Problem behoben. Soweit, so gut. Die ganze Aktion hatte natürlich auch einen Haken: Die Flash-Objekte wurden nicht mehr angezeigt (wer hätte es gedacht
).
Nach ziemlich langem Rumprobieren habe ich jetzt eine Lösung gefunden: Die Flash-Objekte werden erst aktiviert, wenn die Seite komplett geladen ist. Dafür bleiben die Flash-Objekte zunächst einmal mit <!-- <object>[...]</object> --> auskommentiert. Jetzt ist es wichtig, dass man einen Containerblock hat, der im Prinzip nur diesen Code enthält, also keinen Code zwischen dem Tag und dem Kommentaranfang bzw. -ende. Das kann z.B. ein div sein oder auch eine Tabellenzelle (td). Ich habe mich für letzteres entschieden, da es das eh schon gab. Dieser Container bekommt dann eine ID (im Beispiel unten ist das flash1).
Jetzt kann die Javascript-Funktion eingebaut werden, die die eigentlich Aufgabe übernimmt, nämlich das Einblenden der Flash-Objekte. Das geht sehr einfach, es müssen ja nur die Kommentar-Tags entfernt werden, um die Objekte wieder zu akivieren. Das Ergebnis sollte dann in etwa so aussehen:
<script type="text/javascript">
function lastFMshow() {
var flash1 = document.getElementById('flash1').innerHTML;
flashBeg = flash1.indexOf("<!--");
flashEnd = flash1.indexOf("-->");
flash1 = flash1.substring(flashBeg + 4, flashEnd);
document.getElementById('flash1').innerHTML = flash1;
}
</script>
<table class="lastfmWidget" cellpadding="0" cellspacing="0" border="0" style="width:184px;">
<tr class="lastfmHead">
<td><a title="%user%: %title%" href="..."></a></td>
</tr>
<tr class="lastfmEmbed">
<td id="flash1">
<!-- <object type="application/x-shockwave-flash" data="...
Damit sind wir schon fast fertig, es fehlt nur noch der Aufruf dieser Funktion. Der sollte – wie gesagt – dann erfolgen, wenn die Seite komplett geladen ist. Das lässt sich durch das Attribut onload im body-Tag erreichen. Folglich muss im Theme der Kopf der Seite gesucht werden (meist header.php) und der Tag dort so geändert werden:
<body onload="lastFMshow();">
Eventuelle bereits bestehende Attribute können natürlich weiter verwendet werden. Fertig! Jetzt sollte das Surfen wieder Spaß machen.
UPDATE: In WordPress kann es wünschenswert sein, dass die Templates nicht geändert werden müssen. Es muss also eine Alternative zum onload-Attribut verwendet werden. Leider will der IE hier nicht so wie Firefox, daher muss zunächst festgestellt werden, welche der beiden Funktionen verwendet werden kann. Eingefügt werden muss in den obigen Code noch folgendes nach dem </script>:
if (window.addEventListener) {
window.addEventListener('load', lastFMshow, false);
} else if (window.attachEvent) {
window.attachEvent('onload', lastFMshow);
}
Wie angestrebt fällt dafür die Veränderung des body-Tags weg.
super workaround, damit hatte ich auch schon schwierigkeiten!
thx