JS für Google Maps-ähnliche Anwendung?

Website laggt wegen zu großer Tabelle?

Hallo!
Ich bin grade dabei, mir eine Map für mein Browsergame zu basteln, und habe jetzt Performanceprobleme mit manchen Browsern.
Chrome, Safari und Opera rendern die Map ohne Probleme, aber mit dem Internet Explorer und Firefox ruckelt das ganz schön. Da das aber die meistbenutzten Browser sind, sollte es mit denen auch funktionieren.
Als Map benutze ich bisher eine 100x100 Felder große Tabelle mit jeweils einem Bild drinnen:
http://multimolti.de/test/dragmap/new/testmap5.php (Laden kann etwas dauern, der Server ist ziemlich lahm)
Kann es sein, dass das Ruckeln daher kommt, dass Tabellen für sowas nicht geeignet sind? Kann man das irgendwie anders lösen, z.B. mit divs und dann CSS float oder so?

Bitte helft mir, danke!

(Zumindest bei mir ruckelt es, ich habe einen Pentium 4 mit 3,2GHz und Hyperthreading, bei meinem Kumpel mit neuem Intel Core2Duo läufts auch im Firefox glatt. Aber es soll ja auch bei Benutzern mit langsamen PCs laufen...)
 
Danke, werde ich bei Gelegenheit probieren!

Falls jemand eine Ahnung hat, warum das so ruckelt, dann bitte hier posten
;-) Danke
 
Du könntest einfach nur den sichtbaren Ausschnitt statt die gesamte Karte darstellen. Das wären in deinem Fall dann ja nur etwa 10% der gesamten Karte.
 
Wie meinst du das? Die muss man ja verschieben können, also muss auch die ganze Karte existieren. Oder meinst du, ich soll die nur aufbauen lassen, wenn der momentane Teil auch sichtbar ist?
 
Die Kartendaten müssen zwar schon vorhanden sein, doch es ist ja immer nur ein kleiner Ausschnitt (14 × 10 Felder) sichtbar. Deswegen würde es reichen, nur diese Felder darzustellen. Und wenn sich der Ausschnitt bewegt, werden die Felder, die sich aus dem Sichtfeld bewegen, durch diejenigen ersetzt, die sich in das Sichtfeld bewegen. Damit brauchst du minimal nur 15 × 11 Felder, also gerade mal 1,65% der gesamten 1000 Felder.
 
Und wie mache ich das am Besten? Ich habe leider keine Idee, wie ich das realisieren könnte, ohne die Tabelle jedes mal neu zu erstellen...
 
Stelle die 15 × 11 Felder durch absolut positionierte DIV-Elemente dar.
Wenn sich jetzt das Suchtfeld „bewegt“, beispielsweise nach links, bewegen sich ja die Felder innerhalb des Sichtfelds nach rechts. Irgendwann ist es dann so weit, dass sich die Spalte ganz rechts außerhalb des Sichtfelds befindet. Das heißt, dass sie nicht mehr benötigt wird. Auf der linken Seite fehlt aber gleichzeitig eine Spalte, an dessen Stelle wir nun unsere aus dem Sichtfeld verschwundene Spalte setzen können.
Dadurch „rotieren“ die Spalten/Zeilen je nach Bewegungsrichtung und du brauchst immer nur 15 × 11 Felder.

Und um mögliche Darstellungsfehler beim Rotieren der Spalten/Zeilen zu vermeiden, würde ich 17 × 13 Felder verwenden, um neben den 15 × 11 notwenigen Feldern noch jeweils ein Pufferfeld in jeder Richtung zu haben.

Und um diese Felder nun adressieren zu können, kannst du sie entweder eindeutig mit ihren ursprünglichen X/Y-Koordinaten benennen oder sie einfach fortlaufend durchnummerieren. Gleichzeitig speicherst du den aktuellen X-/Y-Versatz vom Ausgangspunkt speichern, um so immer die richtigen Felder trotz ihres aktuellen Versatzes zu bekommen.
 
MsvP@habdichliebhasi hat gesagt.:
3. JS bauen, dass per Drag&Drop die Bilder als Gesamtes verschiebt (z.B. in dem du die Bilder selbst auch nochmal in ein Div setzt, das sich verschieben lässt). Dann eine Abfrage auf x / y Koordinaten erstellen, die prüft, ob sich der Bildbereich außerhalb des umliegenden Div Rahmens befindet, wenn dies der Fall ist, blendest du das außerhalb liegende Bild aus und lädst dir das nächstfolgende Bild auf der anderen Seite nach. Für das Nachladen musst du natürlich dann deine vorher entwickelte Bezeichnungslogik für die Bilder benutzen, damit du weißt, welches Bild geladen werden muss.
Zum Vergrößern anklicken....

Das hatte ich dir doch schon am Anfang vorgeschlagen. ;-)

Lg
Micha
 
Dieses Thema wurde aus mehreren zusammengefügt. Daher hatte ich von deinem Vorschlag keine Ahnung. Dass wir aber dieselbe Idee haben, zeugt von ihrer Plausibilität.
Mal sehen, was Lennart davon hält.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück