Weltkarte erstellen (dauert ewig)

**Kropff** · 07.06.2009, 18:19

ist hier wohl das falsche forum, daher verschieb ich es mal.

peter

**martinm79** · 07.06.2009, 18:51

Wie lädst du denn die Bilder?
Was genau dauert denn lange?

**Besth** · 07.06.2009, 19:47

naja einfach mit

Code:

<img>

da hab ich dann sozusagen bei 50x50 --- 2500 img tags.
und eh die dann aufgebaut werden im browser dauert es halt (kannst ja mal testen - bei 50 bildern gehts relativ schnell aber sobald es mehr werden wird es mist)

**Kropff** · 07.06.2009, 19:56

wie sieht es eigentlich mit deinem hosting aus? ist das so ein billig-paket, wo zig tausend auftritte auf einem server liegen? oder arbeitest du derzeit noch lokal? wie wäre es mit einem preloader per javascript? einmal alle bilder laden (auch wenn es dauert) und dann sind sie im browsercache.

peter

**Besth** · 07.06.2009, 20:06

also keine ahnung was du jetzt genau meinst mit meinem billig-angebot - aber ja ich teste es direkt bei meinem hoster und nicht lokal. ich kann es ja mal lokal ausprobieren aber ich denke nicht das das einen unterschied machen wird.

und zum preloaden: das ewige gelade will ich mir ja sparen. und da sich die karte immer mal ändert hab ich da auch nicht viel gekonnt.

**Besth** · 07.06.2009, 20:21

habs jetzt mal lokal getestet mit xampp - und wie ich mir dachte das selbe problem bleibt

**onemorenerd** · 07.06.2009, 20:33

Du könntest DIVs zeichnen statt IMG.

PHP-Code:


<?php

$width = 50;

$height = 50;

$scale = 3;

?>

<html>

<head>

<title></title>

<style type="text/css">

.pixel { 

    width: <?php echo $scale; ?>px; 

    height: <?php echo $scale; ?>px; 

    margin: 0; 

    padding: 0; 

    border: none; 

    display: block;

    float: left;

}

.green { 

    background-color: 6c6; 

}

.blue  { 

    background-color: 39f; 

}

</style>

</head>

<body>

<?php

if (isset($_GET['div'])) {

    for ($y = 0; $y < $height; $y++) {

        for ($x = 0; $x < $width; $x++) {

            echo '<div class="pixel ' . (($x + $y) % 2 == 0 ? 'green' : 'blue') . '"></div>';

        }

        echo '<div style="clear: both;"></div>';

    }

}

?>

<hr />

<?php

if (isset($_GET['img'])) {

    for ($y = 0; $y < $height; $y++) {

        for ($x = 0; $x < $width; $x++) {

            echo '<img src="images/pixel_' . (($x + $y) % 2 == 0 ? 'green' : 'blue') . '.gif" class="pixel" />';

        }

        echo '<div style="clear: both;"></div>';

    }

}

?>

</body>

</html>

Aber die meisten Browser haben Schwierigkeiten ab einer bestimmten Zahl sichtbarer Elemente. Mit IMG vielleicht schon bei 100x100, bei DIV vielleicht erst bei 200x200. Das kommt ganz auf den Browser an (und aufs CSS).

Du solltest dir einen anderen Weg suchen. Kennst du schon die mächtigen Image-Funktionen von PHP?

**Besth** · 07.06.2009, 20:36

ja hab ich auch schon überlegt.
nur geht das denn "schneller"?
oder hab ich dann das selbe problem?

ach ich verlink jedes bild noch extra - das wäre ja in nem großen bild eher ungünstig oder?

**onemorenerd** · 07.06.2009, 20:39

Es geht in den meisten Browsern einen Tick schneller bzw. der Absturz kommt später (aber er kommt!). Probiers halt mal aus!

**wahsaga** · 07.06.2009, 20:40

Zitat von Besth Beitrag anzeigen

Das klappt auch prima. Problem hab ich nur bei größeren Karten. Ab einer größe von 50x50 dauert es halt ewig eh die Weltkarte aufgebaut ist. - weil ja dann 50x50 = 2500 Bilder geladen werden müssen.

Grob rechnet man pro HTP-Request mit einem Overhead von einem Kilobyte - also rechne dir aus, wie viel Daten dein Browser laden muss, wenn das wirklich alles einzelne Grafiken sind.
Dazu kommt natürlich noch, dass immer nur ein paar Ressourcen von einem Server parallel angefordert werden.

also für jede Koordinate wird ein Bild erzeugt was nur 2px x 2px groß ist und dann durch zb blaue oder grüne Färbung erkennt man ob dort Wasser oder ähnliches ist.

Den Ansatz kannst du in die Tonne kloppen. Erzeuge serverseitig ein grosses Bild, welches die entsprechenden Markierungen enthält.

**Besth** · 07.06.2009, 20:43

und wie mach ich das dann mit dem verlinken?
also wenn man dann auf ne bestimmte stelle klickt soll man wo anders hinkommen. mit maparea? da hab ich ja dann wieder das selbe problem mit dem großen request

**wahsaga** · 07.06.2009, 21:02

Zitat von Besth Beitrag anzeigen

mit maparea? da hab ich ja dann wieder das selbe problem mit dem großen request

Ausprobieren, ob das performanter funktioniert.

Und wenn nicht, dann musst du die Datenmenge wohl oder übel verringern bzw. besser aufteilen.

**jmc** · 07.06.2009, 21:21

Wenn du nur die Koordinaten übergeben willst kannst du das mit Javascript ja ganz einfach machen. Wenn du etwas genauer erlklähren würdest was für Links du da willst lässt sich sicher eine Lösung finden.

Beim Bild kannst du ja, wenn es nicht zu viele verschiedene 2x2 Pixel sind ganz gut ein komprimiertes PNG mit Palette erstellen und du wirst sogar bei 1000x1000 px mit relativ kleinen Bilddateien auskommen.

**Besth** · 07.06.2009, 22:08

ja ich will in den links nur die koordinaten übergeben.
aber wie soll das gehen mit javascript? kann ich mir grad nich zusammreimen

Weltkarte erstellen (dauert ewig)