Karte optimieren (Ladenzeit)

  • Ich habe mal Testweise eine Art Karte mit PHP programmiert. Es ist eine simple viereckige Karte, ein "User" bekommt eine x und eine y Koordinate und besetzt einen Platz. Anschauen kann man sich das ganze hier: http://baukasten.myxotod.de/test/

    An sich klappt alles, so wie ich mir das vorgestellt habe. Über das Formular kann man zu einer bestimmten Koordinate springen (diese wird dann in der Mitte der Karte angezeigt). Links kann man sich durch die Karte navigieren.
    Auf der Minimap sieht man wo man sich gerade gefindet und unten sieht man den Ausschnitt wo man gerade ist. Rote Felder bedeutet, dass dieses Feld bereits besetzt ist.

    Mein Problem hier ist nur die Ladezeit. Bei einer Kartegröße bis ca. 100 x 100 Kästchen geht es noch. Danach brauch der Browser ewig zum Laden und stürzt teilweise sogar ab. Grund ist vermutlich die Minimap, weil die Schleifen dort einfach zu oft durchlaufen :/ Ich wollte einfach mal hier nachfragen, ob jemand eine Idee zum optimieren hat. Hier ist der Quellcode:

    Don't follow me, I run into walls.

  • Du suchst an der falschen Stelle nach dem Problem.

    50x50 Karte ergibt bei dir 187329 Zeichen
    100x100 ergibt schon 712181
    Also nach dem Ansatz, den du hier gepostet hast. Auf der 'live' Version bestimmt noch weitaus mehr durch die Links.

    Merkst was? ;)

    Aber auch bei der Herangehensweise: eine Klasse statt jedesmal einer Styleangabe würde die Datenmenge schonmal etwas reduzieren :rolleyes: (oder vllt. auch eine bedingte CSS Anweisung à la .class td *mhh* noch weniger unnötigen mist)

    //P.S. so zum Vergleich, jQuery minified hat ohne das Kommentar derzeit 84893 Zeichen. Das sind 29kb - und du hast ein gebilde das auch noch gerendert werden muss.

    Noch ein Tipp: man kann mit JS die Mauskoordinaten auslesen, bin jetzt nicht sicher ob es relativ zu einem Container geht - aber die Karte dann mit einem Script zu verwenden würde dir seeeehr viel sparen (im Zweifel kann man die relativen Koordinaten auch selbst berechnen). Dafür könntest du einmal eine kleine gif für die grauen Kästchen machen und für die 'besetzten' eine Grafik dynamisch generieren und die da drüber legen. Tada - Karte die bis in die 1000x1000 gehen kann (auch wenn vllt. 250x250 schon ausreichen sollte, eine 1000x1000 Grafik hat auch schon 'paar' KB und generieren dürfte auch etwas dauern - aber da kann man wieder etwas cachen...).

    8 Mal editiert, zuletzt von Grevas (9. März 2011 um 21:41)

  • Oh, das leuchtet natürlich ein. :? Ich versteh nur nicht, wieso ich irgendwelche Koordinaten mit Javascript auslesen soll? Wo denn?

    EDIT//
    Wäre es vielleicht besser, wenn ich die Minimap bzw. Übersichtskarte als Bild erstelle mit PHP? Das müsste doch umsetzbar sein oder?

    Don't follow me, I run into walls.

    Einmal editiert, zuletzt von MyXoToD (10. März 2011 um 13:49)

  • Das hab ich geschrieben, ja, nagut, fast...
    Ich dachte eher, dass nur die besetzten Felder als Grafik generiert werden - spart unnötige Durchläufe.

    Du brauchst JavaScript um die Bereiche anklickbar zu machen.

    Beim clickevent die Mauskoordinaten relativ zur Karte holen / berechnen und schon hast du deine Koordinaten.

    2 Mal editiert, zuletzt von Grevas (10. März 2011 um 18:15)

  • Es ist nicht zwingend notwendig, dass die Übersichtskarte anklickbar ist. Das Bild der Karte bekomm ich hin allerdinsg nicht so wie ich es mir gewünscht habe. Erster Test wieder hier: http://baukasten.myxotod.de/test/

    Der Quellcode davon:

    Mein Problem, ich möchte 3x3 Pixel je Feld und jeweils 1 Pixel weißen Zwischenraum zwischen den ganzen Kästchen. In meinem Script brauch ich ja ro Koordinate aber den 1er Schrit. Das ist der Grund, warum die 3er Kästchen dann wieder "übermalt" werden und aus den 3er Kästchen ein 1er Kästchen wird... Ich hoffe jemand versteht was ich meine :D

    Wie kann ich also eine Karte hinbekommen, auf der jede Koordinate 3x3 Pixel groß ist?

    Don't follow me, I run into walls.