nietaL
NGBler
Hey Leute,
ich habe eine Landkarte mit eine Auflösung von 7382x6040 Pixeln, die mit Hintergrund eines divs ist. Dieses ist mit height und width tags herunterskaliert auf 1100x900.
[src=html4strict]<div id="map_img" style="position:absolute; width: 1100px; height: 900px; left:0px; top:0px; transition: 0.5s; z-index:1; background-image:url(img/maps/insel/_hg.jpg), url(img/maps/struktur.jpg); background-blend-mode: multiply; background-size: contain;"></div> [/src]
Per Doppelklick wird eine JS-Funktion angesprochen, die die height und width des o.g. divs auf die Werte der Karte erhöht (durch einfaches Neusetzen). Durch transition ist es schön smooth. Das Problem ist, dass dazu noch mehr Layer kommen, gleiche Größe, die auch parallel mitgezoomt werden müssen. Denn obwohl die Dateigrößen lächerlich sind (Karte: 5MB), geht meine CPU sofort auf Volllast und der RAM wird bis ins Limit geschröpft. Die Frames bei der Transition brechen ein.
Hat jemand einen Tip, wie ich die Performance verbessere, bzw. ja ehrlich gesagt überhaupt erst ermögliche?
Ich habe davon mal ein Video aufgenommen. Im Firefox geht das ganze noch so halbwegs, obwohl es auch schon keinen Spaß mehr macht. Chrome stürzt dabei gleich ab.
https://youtu.be/H2VxtSTAgc8
Hier eine frühe Experimentiert-Version, die ihr ausprobieren könnnt. http://www.ouraltis.de/experiment/
Beim Reinzoomen hakelts (Chrome). Rauszoomen geht nur über Neuladen per Enter in URL-Zeile.
ich habe eine Landkarte mit eine Auflösung von 7382x6040 Pixeln, die mit Hintergrund eines divs ist. Dieses ist mit height und width tags herunterskaliert auf 1100x900.
[src=html4strict]<div id="map_img" style="position:absolute; width: 1100px; height: 900px; left:0px; top:0px; transition: 0.5s; z-index:1; background-image:url(img/maps/insel/_hg.jpg), url(img/maps/struktur.jpg); background-blend-mode: multiply; background-size: contain;"></div> [/src]
Per Doppelklick wird eine JS-Funktion angesprochen, die die height und width des o.g. divs auf die Werte der Karte erhöht (durch einfaches Neusetzen). Durch transition ist es schön smooth. Das Problem ist, dass dazu noch mehr Layer kommen, gleiche Größe, die auch parallel mitgezoomt werden müssen. Denn obwohl die Dateigrößen lächerlich sind (Karte: 5MB), geht meine CPU sofort auf Volllast und der RAM wird bis ins Limit geschröpft. Die Frames bei der Transition brechen ein.
Hat jemand einen Tip, wie ich die Performance verbessere, bzw. ja ehrlich gesagt überhaupt erst ermögliche?
Ich habe davon mal ein Video aufgenommen. Im Firefox geht das ganze noch so halbwegs, obwohl es auch schon keinen Spaß mehr macht. Chrome stürzt dabei gleich ab.
https://youtu.be/H2VxtSTAgc8
Hier eine frühe Experimentiert-Version, die ihr ausprobieren könnnt. http://www.ouraltis.de/experiment/
Beim Reinzoomen hakelts (Chrome). Rauszoomen geht nur über Neuladen per Enter in URL-Zeile.
Zuletzt bearbeitet: