Klabautermann: Seitenperfomance bei vielen großen Grafiken

Hallo Community,

ich würde mich bei folgendem Problem über eure Anregungen freuen:

Auf einer Webseite sollen sehr viele (100 oder sogar mehr) sehr große Grafiken geladen werden.
Der Ladeprozess ist nicht das Problem und soll mittels YUI2 ImageLoader realisiert werden.
Doch auch bei voll geladener Seite gestaltet sich das srollen, aber vorallem das zommen als Problem: es ruckelt. Habt ihr eine Idee, wie das Problem zu umgehen wäre?

Viele Grüße
Raphael

  1. Auf einer Webseite sollen sehr viele (100 oder sogar mehr) sehr große Grafiken geladen werden.

    Ach ja.

    Der Ladeprozess ist nicht das Problem und soll mittels YUI2 ImageLoader realisiert werden.
    Doch auch bei voll geladener Seite gestaltet sich das srollen, aber vorallem das zommen als Problem: es ruckelt. Habt ihr eine Idee, wie das Problem zu umgehen wäre?

    Ja. Lade einfach viel weniger und weniger große Grafiken.

    Fred

    1. Ja. Lade einfach viel weniger und weniger große Grafiken.

      Dies ist in diesem Fall nicht möglich. Trotzdem Danke.

      1. Hallo!

        Ja. Lade einfach viel weniger und weniger große Grafiken.

        Dies ist in diesem Fall nicht möglich. Trotzdem Danke.

        Bist du dir sicher? Mir fällt kein Grund ein warum man über 100 sehr große Bilder irgendwo anders als in einer Ausstellung unter bringen sollte.

        Matze

        1. Moin,

          Bist du dir sicher? Mir fällt kein Grund ein warum man über 100 sehr große Bilder irgendwo anders als in einer Ausstellung unter bringen sollte.

          Ihm scheinbar schon. Nur weil dir (und auch mir) kein Anwendungsfall einfällt, heißt es ja nicht, dass es keinen gibt.

          Grüße Marco

          --
          Ich spreche Spaghetticode - fließend.
          1. Hallo!

            Ihm scheinbar schon. Nur weil dir (und auch mir) kein Anwendungsfall einfällt, heißt es ja nicht, dass es keinen gibt.

            Ok, überleg mal. Bilder sind da um gesehen zu werden.
            Wie viele _große_ Bilder kann man selbst bei gigantischen Monitoren sehen?
            Wozu sollte man "100 oder mehr" Bilder auf eine Seite klatschen die niemand sehen kann?
            Da liegt der Fehler im Konzept, nicht an der Umsetzung.

            Grüße, Matze

            1. Moin,

              Wie viele _große_ Bilder kann man selbst bei gigantischen Monitoren sehen?

              Bei meinem 24"-Monitor kann ich schon recht große Bilder sehen. Immer nur eins auf einmal, aber dazu gibt es ja eine Scrollfunktion.

              Wozu sollte man "100 oder mehr" Bilder auf eine Seite klatschen die niemand sehen kann?

              Wozu? Ich bin mir sicher, der OP hat sich dazu Gedanken gemacht. Schließlich hat er eine Javascript-Bibliothek eingebunden, die Bilder erst nachlädt. Ich denke nicht, dass man sich dafür entscheidet, ohne sein Konzept zu überdenken. Zumal die typischen "Mit-welcher-Kanone-soll-ich-auf-die-Spatzen-schießen"-Fragesteller meistens schon Probleme bei der Einbindung des Javascripts gehabt hätten.

              Da liegt der Fehler im Konzept, nicht an der Umsetzung.

              Das ist eine vage Vermutung. Es gibt durchaus Bilder, die nur groß angezeigt Sinn machen; beispielsweise detaillierte Karten, Baupläne, ER-Diagramme, ... Die Liste ist lang. Vieles davon tritt unter Umständen rudelweise auf.

              Mir gefällt einfach die Doppelmoral nicht, einerseits zu behaupten, man habe keine Glaskugel zum analysieren unzureichend beschriebener Probleme, andererseits aber bei recht gut beschriebenen Problem wissen zu wollen, dass das Konzept falsch ist, ohne auch nur eine Ahnung des inhaltlichen Hintergrunds zu haben.

              Das ist nicht direkt auf dich bezogen, sondern ein allgemeines Phänomen im Forum. Das soll auch kein Vorwurf, sondern ein Hinweis sein. Ich bin ein friedliebender Mensch :)

              Grüße Marco

              --
              Ich spreche Spaghetticode - fließend.
              1. Bei meinem 24"-Monitor kann ich schon recht große Bilder sehen. Immer nur eins auf einmal, aber dazu gibt es ja eine Scrollfunktion.

                Wenn du immer nur 1 Bild sehen kannst, wozu sollte man 100 und mehr laden? Wären da nicht thumbnails mit Link auf die große Version sinnvoller?

                Das ist eine vage Vermutung. Es gibt durchaus Bilder, die nur groß angezeigt Sinn machen; beispielsweise detaillierte Karten, Baupläne, ER-Diagramme, ... Die Liste ist lang. Vieles davon tritt unter Umständen rudelweise auf.

                Da reden wir immernoch von 1 Bild und nicht von 100 auf einer Seite. Dass die Bilder nachgeladen werden, macht es in dem Fall ja nicht besser sonst hätte der OP ja kein Problem.

                Mir gefällt einfach die Doppelmoral nicht, einerseits zu behaupten, man habe keine Glaskugel zum analysieren unzureichend beschriebener Probleme, andererseits aber bei recht gut beschriebenen Problem wissen zu wollen, dass das Konzept falsch ist, ohne auch nur eine Ahnung des inhaltlichen Hintergrunds zu haben.

                Ich fragte bereits, ob er sich sicher ist, dass es nicht auch anders geht. Natürlich vermute ich nur, dass der Fehler im Konzept liegt, sonst hätte ich nicht gefragt. Meine Ausführungen hinterfragen ja auch den Sinn und solange keiner genannt wird, muss ich mit den gegebenen Informationen an der Sinnhaftigkeit zweifeln.

                Das ist nicht direkt auf dich bezogen, sondern ein allgemeines Phänomen im Forum. Das soll auch kein Vorwurf, sondern ein Hinweis sein. Ich bin ein friedliebender Mensch :)

                Kein Problem, ist angekommen.

                Grüße, Matze

                1. Moin,

                  Wenn du immer nur 1 Bild sehen kannst, wozu sollte man 100 und mehr laden? Wären da nicht thumbnails mit Link auf die große Version sinnvoller?

                  Pinzipiell ja, wenn man die Ladezeit beim Bildwechsel vernachlässigen kann.
                  Hat man aber beispielsweise mehrere große (vielleicht sogar gesplittete) Grafiken, wie Baupläne eines Hauses oder Karten verschiedenen Typs eines bestimmten Gebiets, bei denen der User relativ schnell zwischen den Bildern wechseln will, ist es besser alle relevanten Grafiken vorzuhalten, um Ladezeiten zu vermeiden.

                  Ob das so ein Anwendungsfall ist, oder ein andersgearteter, bei welchem selbiges nicht nötig ist, kann ich natürlich nicht sagen.

                  Grüße Marco

                  --
                  Ich spreche Spaghetticode - fließend.
                  1. Hallo,

                    Wenn du immer nur 1 Bild sehen kannst, wozu sollte man 100 und mehr laden? Wären da nicht thumbnails mit Link auf die große Version sinnvoller?
                    Pinzipiell ja, wenn man die Ladezeit beim Bildwechsel vernachlässigen kann.

                    jetzt kommen wir auf den Knackpunkt!

                    Hat man aber beispielsweise mehrere große (vielleicht sogar gesplittete) Grafiken, wie Baupläne eines Hauses oder Karten verschiedenen Typs eines bestimmten Gebiets, bei denen der User relativ schnell zwischen den Bildern wechseln will, ist es besser alle relevanten Grafiken vorzuhalten, um Ladezeiten zu vermeiden.

                    Ja. Aber "vorhalten" muss nicht bedeuten, dass alle Grafiken auch permanent im Dokument eingebunden sind.

                    Im einfachsten Fall macht man überhaupt nichts zur Optimierung, sondern lädt jede Grafik dann, wenn sie angezeigt werden soll. Beim zweiten Mal befindet sich die Grafik bereits im Cache und sollte ohne merkliche Verzögerung von dort kommen. Man hätte also nur eine Verzögerung, wenn ein Bild zum ersten Mal abgerufen wird.

                    Und auch diese Verzögerung kann man möglicherweise durch Preloading eliminieren - was aber auch den Nachteil hat, dass eventuell Inhalte auf Verdacht vorgeladen werden, die der Besucher dann gar nicht mehr anschaut. Da muss man also Vor- und Nachteile gegeneinander abwägen.

                    Aber egal ob man dem Cache vertraut oder gezielt vorlädt: Die momentan nicht sichtbaren Bilder müssen nicht im DOM eingebunden sein. Dann geht das Scrollen oder Zoomen des/der aktuell angezeigten Bildes/Bilder auch flüssiger.

                    So long,
                     Martin

                    --
                    Die letzten Worte des Hardware-Bastlers:
                    Das Netzkabel lass ich wegen der Erdung lieber dran.
                    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
                    1. Hallo zusammen,

                      ich hätte nicht gedacht, was für eine Diskussion meine Frage hier aulöst, danke euch aber für eure Antworten.

                      Den Grund warum ich so ungewöhnlich viele Grafiken laden möchte nannte ich nicht, um nicht vom Thema abzulenken. Da es aber doch einige zu interessieren scheint: Es soll ein Dokument dargestellt werden. PDF eignet sich leider in diesem Fall nicht, da verschiedene Interaktionen ermöglicht werden sollen, die mir bei der Darstellung mittels PDF-Reader nicht möglich scheinen.

                      Die momentan nicht sichtbaren Bilder müssen nicht im DOM eingebunden sein. Dann geht das scrollen oder Zoomen des/der aktuell angezeigten Bildes/Bilder auch flüssiger.

                      DOM scheint hier das Stichwort zu sein, nach dem ich suchte.

                      Vielen lieben Dank

                      Raphael

                    2. Moin,

                      [...]egal ob man dem Cache vertraut oder gezielt vorlädt: Die momentan nicht sichtbaren Bilder müssen nicht im DOM eingebunden sein. Dann geht das Scrollen oder Zoomen des/der aktuell angezeigten Bildes/Bilder auch flüssiger.

                      Richtig, so habe ich das gemeint :)

                      Grüße Marco

                      --
                      Ich spreche Spaghetticode - fließend.
                      1. Richtig, so habe ich das gemeint :)

                        Ach, dann haben wir aber auch schön aneinander vorbei geredet...

                        Immerhin konnten wir so das Problem lösen :)

                        Grüße, Matze

                  2. Hai

                    Moin,

                    Wenn du immer nur 1 Bild sehen kannst, wozu sollte man 100 und mehr laden? Wären da nicht thumbnails mit Link auf die große Version sinnvoller?

                    Pinzipiell ja, wenn man die Ladezeit beim Bildwechsel vernachlässigen kann.
                    Hat man aber beispielsweise mehrere große (vielleicht sogar gesplittete) Grafiken, wie Baupläne eines Hauses oder Karten verschiedenen Typs eines bestimmten Gebiets, bei denen der User relativ schnell zwischen den Bildern wechseln will, ist es besser alle relevanten Grafiken vorzuhalten, um Ladezeiten zu vermeiden.

                    Vorladen ohne es aktuell darzustellen ist möglich. Dann einfach nur die relavanten bilder im viewport anzeigen, oder thumbnails die links zum original (vorgeladenen) bild sind.

                    Grüße Marco

                    Mfg entropie

                    --
                    Whenever people agree with me I always feel I must be wrong.
                      -- Oscar Wilde
              2. Tach!

                Mir gefällt einfach die Doppelmoral nicht, einerseits zu behaupten, man habe keine Glaskugel zum analysieren unzureichend beschriebener Probleme, andererseits aber bei recht gut beschriebenen Problem wissen zu wollen, dass das Konzept falsch ist, ohne auch nur eine Ahnung des inhaltlichen Hintergrunds zu haben.
                Das ist nicht direkt auf dich bezogen, sondern ein allgemeines Phänomen im Forum. Das soll auch kein Vorwurf, sondern ein Hinweis sein. Ich bin ein friedliebender Mensch :)

                Mir gefällt einfach in solchen Diskussionen der Stil nicht. Einerseits die Extreme zu benennen und andererseits den Ort als ein Gesamtgebilde zu diskreditieren. Da kannst du Gift drauf nehmen, dass das in jeder ungezielten Kritikrunde so benannt wird und auch, dass sich daraufhin nichts zum Positiven hin wendet. Lediglich die Stimmung insgesamt leidet noch ein bisschen mehr als sie durch die "schwarzen Schafe" sowieso schon beeinflusst ist.

                Zurück zum Kernpunkt der "Aufregung". Manche Themen sind so ungenau beschrieben, dass man wenig entnehmen kann, und viel spekulieren muss, wobei man das bei einigen Beschreibungen gut kann, bei anderen weniger gut. In einem direkten Gespräch kann man das eigentliche Problem schneller und in einem Austausch vieler kleine Fragen und Anworten einkreisen. Das ist in einem schriftbasierten Kommunikationsmedium beschwerlich, so dass man eher dazu neigt, die Antwort im Ganzen oder in größeren Schritten zu geben und dabei mit seinen Spekulationen durchaus auch mal falsch liegen kann. Es wird nur dann besser, wenn der OP sich etwas mehr öffnet und die Hintergründe für sein Vorhaben mehr beleuchtet, so dass man einen besseren Einblick in die eigentlich zu lösende Problematik bekommt. Wenn du also zur Lösungsfindung beitragen willst, bezichtige nicht das Forum eines generellen Fehlverhaltens, sondern trag durch gezielte Fragen dazu bei, dass das Thema klarer wird.

                Wenn wir mal annehmen, dass die Aufgabenstellung nicht anders als durch das massenhafte Laden von großen Grafiken lösbar ist, dann muss man mal betrachten, was für Voraussetzungen für solche Massen notwendig sind. Das ist zum einen genügend Speicher, um nicht die langsame Festplatte als Zwischenablage bemühen zu müssen, zum anderen auch genügend Prozessorpower, um die Daten zu verarbeiten. Das Grafiksystem spielt dabei auch noch eine Rolle, selbst wenn es nur um das einfache Anzeigen und nicht noch um das Rendern aus einem Drahtmodell beispielsweise geht. Auf diese Hardware-Gegebenheiten hat man in der Regel keinen Einfluss. Deswegen ist es ungünstig, ein Konzept zu verfolgen, das derart ressourcenhungrig ist. Und dass der Bildschirm begrenzt ist, sich also große Teile der Datenmassen vermutlich gar nicht in der Anzeige befinden, macht die Begründung, man brauche das alles gleichzeitig, nicht glaubwürdiger.

                dedlfix.

                1. Moin,

                  Einerseits die Extreme zu benennen und andererseits den Ort als ein Gesamtgebilde zu diskreditieren. Da kannst du Gift drauf nehmen, dass das in jeder ungezielten Kritikrunde so benannt wird und auch, dass sich daraufhin nichts zum Positiven hin wendet.

                  Ich wollte nur darauf hinweisen, dass eine ausreichend genaue Fragestellung Lösungsversuche verdient hat, und nicht nur das Bedenken einer falschen Konzeptionierung. Ich habe damit weder das Forum diskreditieren wollen, noch Matze; und der nötige Respekt hat doch auch nicht gefehlt oder?
                  Dass man schwarze Schafe nicht bekehren wird, ist mir klar. Ich habe aber keinen der in diesem Thread beteiligten als solches gesehen.

                  Grüße Marco

                  --
                  Ich spreche Spaghetticode - fließend.
      2. Hallo

        Dies ist in diesem Fall nicht möglich. Trotzdem Danke.

        Dann solltest du dein Konzept überdenken.

        Workaround: Lade Bilder erst, wenn sie im Viewport sind und schmeiß sie wieder raus, wenn sie nicht mehr drin sind.

        Gruß
        Ole