nicht angemeldet
JavaScript in FF problemlos in IE lahm (großer Quelltext)
Hallo zusammen,
ich habe eine Liste von 50 Filmen, die aus einer Datenbank kommen. Diese werden tabellarisch dargestellt. Zu jedem dieser Filme möchte ich eine 10-Sterne-Bewertung anbieten (später per AJAX). Hierzu werden zu jedem Film 10 Sterne angezeigt. Wenn man mit der Maus darüberfährt, werden entsprechend der Position des Mauszeigers die Sterne golden oder grau angezeigt. Beim Klick auf z.B. den 7. Stern werden 7 von 10 Punkten gespeichert. Soweit die Theorie.
Um dies zu ermöglichen, füge ich bei jedem Film ein kleines Formular ein, das die Film-ID enthält (hidden). Wenn man dann auf einen Stern klickt, soll das Formular abgeschickt werden und den entsprechenden Wert zusammen mit der Film-ID übermitteln. Das klappt alles absolut problemlos.
Nun ist es so, dass durch die 50 Formulare + Filmdaten der Quelltext der Seite recht lang wird. Das nehme ich in Kauf.
Mein Problem ist, dass der Internet Explorer (zumindest der 7er, den ich hier zum Testen habe -> ich weiss, der ist nicht aktuell, aber unter meinen Nutzern noch recht verbreitet) mit dem Bildwechsel der Sterne und dem Anzeigen des Wertes neben den Sternen offenbar nicht "hinterherkommt". Wenn ich mit der Maus schnell über die Sterne (unterschiedlicher Filme) gehe, passiert mitunter gar nichts. Wenn ich eine Weile mit der Maus über einem Stern warte, klappt's dann nach ein paar Sekunden doch noch. Deshalb nehme ich an, der IE ist einfach nur wesentlich lahmer als Firefox, der alles so macht, wie's sein soll.
Da ich das System auf meiner Webseite noch nicht freigeschaltet habe, hab ich mal eine Seite ausgelagert, wo man es sehen kann:
http://www.filmfreunde.net/test_selfhtml.php (Absichtlich nicht verlinkt!)
Fragen:
- Ist es bei Euch im IE (welche Version) auch so lahm?
- Woran kann es liegen?
- Wie sieht's in anderen Browsern aus?
Es geht wie gesagt um den Bildwechsel und den Anzeigewert rechts neben den Sternen...
Damit Ihr nicht lange suchen müsst: Die JS-Funktionen, die für die Bildwechsel sorgen stecken in der includes/ajax_counter_js.php und sehen folgendermaßen aus:
function voteTag(id, tag) {
document.getElementById(id).innerHTML=tag;
}
function voteGold(id) {
var vote = id.split("_");
for (var i = 1; i <= vote[1]; i++) {
document.getElementById(vote[0]+"_"+i).src="img/star1.gif";
}
for (var k = 10; k > vote[1]; k--) {
document.getElementById(vote[0]+"_"+k).src="img/star2.gif";
}
}
function voteGrey(id, former) {
var allElems = document.getElementsByTagName('*');
for (var i = 0; i < allElems.length; i++) {
var thisElem = allElems[i];
if (thisElem.className && thisElem.className == id) {
thisElem.src = "img/star2.gif";
}
if (thisElem.className && thisElem.className == id+'_selected') {
thisElem.src = "img/star1.gif";
}
}
var vote = id.split("_");
if (former == false) {
voteTag("vote_"+vote[1]+"_tag", "Jetzt bewerten!");
} else {
voteTag("vote_"+vote[1]+"_tag", former);
}
}
Und hier noch ein Beispiel für so ein Formular, in dem es vorkommt:
<form action="http://www.filmfreunde.net/test_selfhtml.php" method="get" name="movievoteform_33773d3d">
<input type="hidden" name="movie_id" value="31694d6d4b673d3d" />
<input type="hidden" name="user_id" value="335331504450757034704d3d" />
<div id="myvote33773d3d">
<table border="0" cellspacing="0" cellpadding="0" style="margin-top: 5px; width: 191px;">
<tr>
<td style="min-width: 101px;" class="left middle">
<input type="image" src="img/star1.gif" style="float: left; background: transparent; width: 10px; height: 8px;" name="vote" value="1" class="vote_31694d6d4b673d3d_selected" id="id31694d6d4b673d3d_1" onclick="confirmvote='1'; return confirm('Möchtest Du "Zurück in die Zukunft" mit '+ confirmvote +' von 10 Punkten bewerten?');" onmouseover="voteTag('vote_31694d6d4b673d3d_tag', 'extrem schlecht'); voteGold('id31694d6d4b673d3d_1');" onmouseout="voteGrey('vote_31694d6d4b673d3d', 'kann man sehen');" />
<input type="image" src="img/star1.gif" style="float: left; background: transparent; width: 10px; height: 8px;" name="vote" value="2" class="vote_31694d6d4b673d3d_selected" id="id31694d6d4b673d3d_2" onclick="confirmvote='2'; return confirm('Möchtest Du "Zurück in die Zukunft" mit '+ confirmvote +' von 10 Punkten bewerten?');" onmouseover="voteTag('vote_31694d6d4b673d3d_tag', 'schlecht'); voteGold('id31694d6d4b673d3d_2');" onmouseout="voteGrey('vote_31694d6d4b673d3d', 'kann man sehen');" />
<input type="image" src="img/star1.gif" style="float: left; background: transparent; width: 10px; height: 8px;" name="vote" value="3" class="vote_31694d6d4b673d3d_selected" id="id31694d6d4b673d3d_3" onclick="confirmvote='3'; return confirm('Möchtest Du "Zurück in die Zukunft" mit '+ confirmvote +' von 10 Punkten bewerten?');" onmouseover="voteTag('vote_31694d6d4b673d3d_tag', 'eher schlecht'); voteGold('id31694d6d4b673d3d_3');" onmouseout="voteGrey('vote_31694d6d4b673d3d', 'kann man sehen');" />
<input type="image" src="img/star1.gif" style="float: left; background: transparent; width: 10px; height: 8px;" name="vote" value="4" class="vote_31694d6d4b673d3d_selected" id="id31694d6d4b673d3d_4" onclick="confirmvote='4'; return confirm('Möchtest Du "Zurück in die Zukunft" mit '+ confirmvote +' von 10 Punkten bewerten?');" onmouseover="voteTag('vote_31694d6d4b673d3d_tag', 'ging so'); voteGold('id31694d6d4b673d3d_4');" onmouseout="voteGrey('vote_31694d6d4b673d3d', 'kann man sehen');" />
<input type="image" src="img/star1.gif" style="float: left; background: transparent; width: 10px; height: 8px;" name="vote" value="5" class="vote_31694d6d4b673d3d_selected" id="id31694d6d4b673d3d_5" onclick="confirmvote='5'; return confirm('Möchtest Du "Zurück in die Zukunft" mit '+ confirmvote +' von 10 Punkten bewerten?');" onmouseover="voteTag('vote_31694d6d4b673d3d_tag', 'kann man sehen'); voteGold('id31694d6d4b673d3d_5');" onmouseout="voteGrey('vote_31694d6d4b673d3d', 'kann man sehen');" />
<input type="image" src="img/star2.gif" style="float: left; background: transparent; width: 10px; height: 8px;" name="vote" value="6" class="vote_31694d6d4b673d3d" id="id31694d6d4b673d3d_6" onclick="confirmvote='6'; return confirm('Möchtest Du "Zurück in die Zukunft" mit '+ confirmvote +' von 10 Punkten bewerten?');" onmouseover="voteTag('vote_31694d6d4b673d3d_tag', 'nicht schlecht'); voteGold('id31694d6d4b673d3d_6');" onmouseout="voteGrey('vote_31694d6d4b673d3d', 'kann man sehen');" />
<input type="image" src="img/star2.gif" style="float: left; background: transparent; width: 10px; height: 8px;" name="vote" value="7" class="vote_31694d6d4b673d3d" id="id31694d6d4b673d3d_7" onclick="confirmvote='7'; return confirm('Möchtest Du "Zurück in die Zukunft" mit '+ confirmvote +' von 10 Punkten bewerten?');" onmouseover="voteTag('vote_31694d6d4b673d3d_tag', 'sollte man sehen'); voteGold('id31694d6d4b673d3d_7');" onmouseout="voteGrey('vote_31694d6d4b673d3d', 'kann man sehen');" />
<input type="image" src="img/star2.gif" style="float: left; background: transparent; width: 10px; height: 8px;" name="vote" value="8" class="vote_31694d6d4b673d3d" id="id31694d6d4b673d3d_8" onclick="confirmvote='8'; return confirm('Möchtest Du "Zurück in die Zukunft" mit '+ confirmvote +' von 10 Punkten bewerten?');" onmouseover="voteTag('vote_31694d6d4b673d3d_tag', 'ziemlich gut'); voteGold('id31694d6d4b673d3d_8');" onmouseout="voteGrey('vote_31694d6d4b673d3d', 'kann man sehen');" />
<input type="image" src="img/star2.gif" style="float: left; background: transparent; width: 10px; height: 8px;" name="vote" value="9" class="vote_31694d6d4b673d3d" id="id31694d6d4b673d3d_9" onclick="confirmvote='9'; return confirm('Möchtest Du "Zurück in die Zukunft" mit '+ confirmvote +' von 10 Punkten bewerten?');" onmouseover="voteTag('vote_31694d6d4b673d3d_tag', 'sehr gut'); voteGold('id31694d6d4b673d3d_9');" onmouseout="voteGrey('vote_31694d6d4b673d3d', 'kann man sehen');" />
<input type="image" src="img/star2.gif" style="float: left; background: transparent; width: 10px; height: 8px;" name="vote" value="10" class="vote_31694d6d4b673d3d" id="id31694d6d4b673d3d_10" onclick="confirmvote='10'; return confirm('Möchtest Du "Zurück in die Zukunft" mit '+ confirmvote +' von 10 Punkten bewerten?');" onmouseover="voteTag('vote_31694d6d4b673d3d_tag', 'extrem gut'); voteGold('id31694d6d4b673d3d_10');" onmouseout="voteGrey('vote_31694d6d4b673d3d', 'kann man sehen');" />
</td>
<td id="vote_31694d6d4b673d3d_tag" style="min-width: 90px; padding-left: 5px;" class="left middle label thin" nowrap="nowrap">kann man sehen</td>
</tr>
</table>
</div>
</form>
P.S.: Der HTML-Validator zeigt derzeit 3 kleinere Fehler an, die ich absichtlich in Kauf nehme und die nichts mit dem Problem zu tun haben. Ich weiss auch, dass das Tabellenlayout der Seite supoptimal ist und dass kein CSS-Code im HTML-Quellcode stehen sollte. Bitte schaut da mal großzügig drüber weg. Danke ;)
Gruß,
Andreas
-
Hallo GrandmasterA,
function voteGrey(id, former) {
var allElems = document.getElementsByTagName('*');for (var i = 0; i < allElems.length; i++) {
Speicherer mal die Anzahl der Elemente in einer Variablen und setze diese in der Schleife ein
var allElems = document.getElementsByTagName('*'); var len = allElems.length; for (var i = 0; i < len; i++) {Mit freundlichem Gruß
Micha-
Speicherer mal die Anzahl der Elemente in einer Variablen und setze diese in der Schleife ein
Danke für den Tipp. Das macht's schonmal DEUTLICH schneller. Noch nicht perfekt, aber zumindest in einem erträglichen Rahmen...
Gruß,
Andreas-
Korrektur: Der "erträgliche Rahmen" ist meiner Meinung nach sogar vollkommen ausreichend (konnte es jetzt nochmal richtig testen - vorher nur mit einer lokal gespeicherten Version des FF im IE, weil mein IE hier nicht ins Netz kommt).
Von daher war Deine Lösung genau das, was mir gefehlt hat. Vielen Dank für die gute Hilfe :)
Werd's heute Abend nochmal in diversen anderen Browsern testen und wenn's da klappt, kann's online gehen.
Gruß und Danke,
Andreas
-
-