Rene: stotternde Animated Gifs beim Laden

Beitrag lesen

Hallo Rene,

kannst du mal eine Beispielseite linken? Oder wenigstens den Teil vom Sourcecode online stellen, wo Du die Grafik einbinden möchtest?

Dann könnten wir das Problem ein bisschen schneller lösen, so müssen wir ins Blaue hineinraten, wie Du das Ganze aufbaust und wo dann der Fehler liegen könnte...

Sorry, ich habe leider keine Beispielseite, da sich alles noch in Entwicklung befindet. Es handelt sich um einen Kalender, der derzeit vom 1. Juni 2007 bis 31. Mai 2008 angezeigt wird. Das ganze für derzeit 5 Unterkünfte. Also habe ich in etwa 365 Tage mal 5 Zeilen. Für jeden Tag wird ein Gif angezeigt. Leere Tage enthalten ein unsichtbares Gif mit 1x1 Pixel Größe, belegte Tage 2-farbige Gifs mit 20x30-Pixel Größe. Vor dem Laden  enthält der Kalender nur unsichtbare Gifs. Beim Laden werden einige der unsichtbaren Gifs mittels Javascript ausgetauscht gegen entsprechende 2-farbige Gifs, je nach Anzahl der Buchungszeiträume.

Quellcode HTML-Seite:

/*
Die Funktion fwait ruft ein Dialogfenster (siehe prototype window class http://prototype-window.xilinus.com/) mit entsprechendem Inhalt auf.

In diesem Dialogfenster wird das animated gif angezeigt!
*/
fwait("Bitte haben Sie einen Moment Geduld!");

var datum = new Date();
var timestamp = Date.parse(datum);
var str = "?timestamp=" + timestamp +
          '&action=start' +
          '&str_id_lodgings=' + str;

var ajax = new Ajax.Request
(
   "inc/ajax/belegung.ajax.php",
   {
      method: 'POST',
      postBody: str,
      onComplete: function(r)
      {
         window.scrollTo(0,0);

fwait(""); // Dialogfenster schließen

// Javascript auswerten
         eval(r.responseText);
      },
      onFailure: function(r)
      {
         fwait(""); // Dialogfenster schließen
         falert(r.responseText);
      }
   }
);

In der AJAX-Datei (inc/ajax/belegung.ajax.php) selbst wird für die Tage, die belegt sind (die belegten Tage werden aus der Datenbank bestimmt), der Javascript-Code zum Austausch der Gifs bestimmt

Beispiel:
var img = $('img_10_1167692400');
if(typeof img == 'object'){
img.src= '../gfx/belegt.gif';
img.style.width = '30px';
img.style.height = '20px';
img.style.marginTop = '0px';
}

Ich habe also eine ganze Reihe dieser Javascript-Anweisungen. Und die Auswertung erfolgt mit eval. Je höher die Anzahl der Buchungszeiträume, desto länger natürlich die Ladezeit und die "Hängpause". Meine Vermutung ist nun, dass der Browser einfach zu beschäftigt ist beim Laden, um das animated gif "sauber" anzuzeigen.