Peter: Thumbnail im HTML durch anklicken wieder vergrössern !?

Hallo,

Ich möchte das Bild als ablegen, welches dann durch anklicken auf einer separaten Seite als Originalbild geöffnet wird.

  1. Servus!

    Hallo,

    Ich möchte das Bild als ablegen, welches dann durch anklicken auf einer separaten Seite als Originalbild geöffnet wird.

    Schau mal hier:

    JavaScript/Tutorials/DOM/DOM-Manipulation#HTML-Markup

    Du hast nen Link. Anstelle eines Linktext hast du das Bild - gib ihm mit width="100" ne kleine Ansicht.

    Im href-Attribut steht die URL des großen Bilds.

    Um das folgende Javascript brauchst du dich nich kümmern.

    Herzliche Grüße

    Matthias Scharwies

    --
    Eigentlich hatte ich heute viel vor - jetzt habe ich morgen viel vor!
    1. Hallo Matthias,

      Vielen Dank für die Hilfestellung. Ich habe mein Glück versucht, komme jedoch nicht weiter. Irgendetwas mache ich falsch, das Bild wird nicht kleiner dargestellt. Wie gesagt, ich möchte das Bild verkleinert darstellen und mit einem Klick darauf vergrössern können. Hier das Beispiel-Bild: https://img.bildhost.com/file/bildhostcom/2022/05/10/Augsburg_die-Bombenacht-1944.jpg Da ich ein absoluter Laie auf diesem Gebiet bin und die «Befehle» nicht kenne, bitte ich Dich mir die entsprechende, komplette «Formel» mitzuteilen.

      Herzliche Grüsse

      Peter

      Servus!

      Hallo,

      Ich möchte das Bild als ablegen, welches dann durch anklicken auf einer separaten Seite als Originalbild geöffnet wird.

      Schau mal hier:

      JavaScript/Tutorials/DOM/DOM-Manipulation#HTML-Markup

      Du hast nen Link. Anstelle eines Linktext hast du das Bild - gib ihm mit width="100" ne kleine Ansicht.

      Im href-Attribut steht die URL des großen Bilds.

      Um das folgende Javascript brauchst du dich nich kümmern.

      Herzliche Grüße

      Matthias Scharwies

      1. Hallo Peter,

        bildhost.com ist sehr fragwürdig.

        • Keine Cookiesteuerung, nur eine Message "Surfst Du hier, krümel ich Dich voll". Das ist nicht zulässig. Womit er mich vollkrümelt, kann ich nicht prüfen, weil ich hier an einem Android-Tablet sitze und diese blöden "Mobil-Browser" mit Fleiß jede Analysemöglichkeit von mir fernhalten (Kiwi soll helfen, aber den mag ich deshalb jetzt nicht extra installieren).
        • Der Link zur Privacy Policy, der die genutzten Trackingmechanismen dokumentieren sollte, ist tot
        • "Über uns" und Impressum sind leere Seiten. In der FAQ steht was von "durch private Mittel finanziert".

        Die fehlenden Pflichtangaben sind ein hohes juristisches Risiko für den Betreiber. Die Seite ist öffentlich, für jedermann nutzbar, ich bezweifle, dass es da einen "Liebhaber-Rabatt" für die Betreiberpflichten gibt. Was für eine Seite ist das?! Ich unterstelle die Schuldvermutung: "Ist das Produkt kostenlos, ist der Kunde das Produkt", sprich: Tracking ohne Ende, um durch Datenverkauf Gewinn zu machen.

        Das Bild selbst ist knapp 50KB groß (brrr, alles Krümel hier!) und damit als Thumbnail tolerierbar. Aber ich hab Dir schonmal gesagt: herunterskalierte Vollbilder sind als Thumbnail nicht zu empfehlen.

        Dass HTML keine Befehle kennt, wusste 2006 schon Orlando

        Im Übrigen hast Du mit dem Link zum Wiki-Artikel das nötige Handwerkszeug bekommen. Wenn es bei Dir nicht funktioniert, dann zeig doch bitte mal deinen Arbeitsstand her, in Form eines Links auf diese Seite. Wenn die nicht öffentlich ist, dann bitte das relevante HTML und CSS. Ansonsten können wir Dir nicht sagen, was Du falsch machst. Ein kopierfertiges HTML Snippet kannst Du nicht erwarten, dazu müsste man halt deine Seite kennen.

        Rolf

        --
        sumpsi - posui - obstruxi
        1. Hallo Rolf,

          Danke für die Antwort. Vor langer Zeit konnte ich diese Darstellung in HTML einfügen und damit das Problem lösen.

          <a href= "https://www.bilderhoster.net/users/usr/3wyf1ww1.jpg " target="_blank">
          <img src="https://www.bilderhoster.net/users/usr/3wyf1ww1.jpg "border="0" width="120" height="200">
          </a>
          

          Damit funktioniert es nicht mehr, vermutlich existieren mittlerweile andere „Befehle“ (sorry, mir kommt keine andere Benennung in den Sinn = Anfänger). Allerdings noch mit „bildhost.com“, jetzt werde ich auf „Bilderhoster“ wechseln.

          Peter

          Edit Rolf B: HTML mit ~~~html und ~~~ markiert.

          1. Hallo Peter,

            nein, die relevanten HTML Elemente (das ist das Wort, das Du statt "Befehle" suchst) sind immer noch die gleichen.

            Was unbedingt noch rein muss, ist ein alt-Attribut zum img-Element. Nicht wegen der Größe, sondern für die Zugänglichkeit der Seite. Selfwiki:Bilder im Internet

            Und eigentlich sollten die width- und height-Attribute wirken.

            Das tun sie höchstens dann nicht, wenn Du noch andere Einflussgrößen hast, wie z.B. ein Stylesheet (CSS), das die Breite und Höhe von Bildern beeinflusst. Sowas findest Du mit den Entwicklerwerkzeugen deines Browsers heraus (dem Elemente-Inspektor).

            Deswegen sollst Du ja den Link zu Seite herzeigen.

            Das "verschobene" Anführungszeichen vom src-Attribut (da steht ein Space davor statt dahinter) ist ein Kopierfehler ins Forum? Oder ist das tatsächlich so bei Dir? Es sollte eigentlich nichts ausmachen, aber solche Kleinigkeiten können gelegentlich Seltsamkeiten auslösen.

            Rolf

            --
            sumpsi - posui - obstruxi
            1. Hallo Rolf,

              Das ist für mich schon höhere Schule. Hier der Link zur entsprechenden Seite, mehr weiss ich auch nicht:

              eBay-Artikel-Nr.:203946211116 (https://www.ebay.de/itm/203946211116) und https://www.ebay.de/lstng?draftId=3392231712701&mode=ReviseItem

              Peter

              1. Peter> Hallo Rolf,

                Das ist für mich schon höhere Schule. Hier der Link zur entsprechenden Seite, mehr weiss ich auch nicht:

                eBay-Artikel-Nr.:203946211116 (https://www.ebay.de/itm/203946211116) und https://www.ebay.de/lstng?draftId=3392231712701&mode=ReviseItem

                Peter

                Hallo Rolf,

                Wie ich anhand der weiteren Kommentare sehen kann, wird "mein" Thema nun auf einem anderen Level diskutiert. Da ich so nicht weiterkomme und mir zusätzlich offensichtlich auch die entsprechenden Grundkenntnisse fehlen, möchte ich mich aus der Diskussion verabschieden. Ich werde weiterhin meine Bilder in Originalgrösse verwenden.

                Danke nochmals an alle Diskussionsteilnehmer für die Bemühungen und Geduld.

                Beste Grüsse und schöne Festtage

                Peter

                1. Hallo Peter,

                  ich bin auf Reisen und ohne meinen Werkzeugkasten, darum kann ich nicht schauen warum es nicht geht.

                  Ich vermute aber Einflüsse des ebay Stylesheets.

                  Letztlich hilft nur: lesen lesen lesen lernen lernen lernen. Haben wir hier auch alle getan. Unsere „Weisheit“ ist nicht vom Himmel gefallen.

                  Rolf

                  --
                  sumpsi - posui - obstruxi
                  1. Hallo,

                    Unsere „Weisheit“ ist nicht vom Himmel gefallen.

                    und wir haben sie auch nicht mit Löffeln verabreicht bekommen.

                    Einen schönen Tag noch
                     Martin

                    --
                    Wie man sich bettet, so schallt es heraus.
                  2. Hallo Peter,

                    ich bin auf Reisen und ohne meinen Werkzeugkasten, darum kann ich nicht schauen warum es nicht geht.

                    Ich vermute aber Einflüsse des ebay Stylesheets.

                    Letztlich hilft nur: lesen lesen lesen lernen lernen lernen. Haben wir hier auch alle getan. Unsere „Weisheit“ ist nicht vom Himmel gefallen.

                    Rolf

                    Hallo Rolf,

                    Ich habe es mit diesem HTML-Element versucht.

                    <a href="https://www.bilderhoster.net/users/usr/3wyf1ww1.jpg" target="_blank" >
                    <img src="https://www.bilderhoster.net/users/usr/3wyf1ww1.jpg" height="200" width="150" alt="https://www.bilderhoster.net/users/usr/3wyf1ww1.jpg" border="1" align="center">
                    </a>
                    

                    Es hat geklappt, allerdings muss ich zum vergrössern auf das verkleinerte Bild mit der rechten Maustaste klicken und dann auf den Befehl "Bild im neuen Tab öffnen". Das Originalbild wird dann separat geöffnet.

                    Für mich ist das Problem damit gelöst.

                    Danke und Gruss

                    Peter

                    1. @@Peter

                      Für mich ist das Problem damit gelöst.

                      Ähm nein, du hast gar nichts gelöst.

                      <a href="https://www.bilderhoster.net/users/usr/3wyf1ww1.jpg" target="_blank" >
                      <img src="https://www.bilderhoster.net/users/usr/3wyf1ww1.jpg" height="200" width="150" alt="https://www.bilderhoster.net/users/usr/3wyf1ww1.jpg" border="1" align="center">
                      </a>
                      

                      Dass es völlig sinnfrei ist, für Thumbnail und für die große Darstellung dieselbe Bilddatei zu verwenden, hat dir @Rolf B wiederholt gesagt. Und was tust du? Verwendest für Thumbnail und für die große Darstellung dieselbe Bilddatei‽ 🤡

                      Welche übrigens weder für Thumbnail noch für die große Darstellung taugt. Fürs Thumbnail ist sie mit 50 kB zu groß; das sollten maximal 20 kB sein. Für die große Darstellung ist das Bild viel zu unscharf.

                      Du musst zwei Bilddateien erstellen.[1] Dabei kann es sich anbieten, Höhe und Breite doppelt so groß zu machen wie das Bild dargestellt werden soll, aber hohe Kompression zu wählen. (Der hier oft verlinkte Artikel „Retina Revolution“ scheint depubliziert worden zu sein, ich finde nur noch dieses Follow-up auf niederländisch.)

                      Es hat geklappt, allerdings muss ich zum vergrössern auf das verkleinerte Bild mit der rechten Maustaste klicken und dann auf den Befehl "Bild im neuen Tab öffnen". Das Originalbild wird dann separat geöffnet.

                      Ähm nein, da muss man nicht mit rechter Maustaste und Kontextmenü ran. Das funktioniert mit der Verlinkung, siehe Lightbox, fallback with no JavaScript.

                      Mit JavaScript kann man da progressive enhancement machen: anstatt auf eine neue Seite zu wechseln öffnet die große Darstellung in einem modalen Fenster (dialog-Element) auf der bestehenden Seite.

                      Per JavaScript wird das Linkziel als src des Bildes im modalen Fenster gesetzt. (Was mit data-src auf einen anderen Wert gesetzt werden kann. Ebenfalls möglich: data-srcset für responsive images.) Lightbox, showModal()

                      Ein Gimmick ist das Thumbnail als Hintergrundbild. Kostet ja nix, das wurde ja bereits übertragen. Und für die kurze Zeit, in der das Bild für die große Darstellung geladen wird, ist ein unscharfes Bild besser als gar kein Bild.

                      🖖 Живіть довго і процвітайте

                      --
                      „Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“
                      — @Grantscheam auf Twitter

                      1. Ich hab das in meinen Beispielen deutlich gemacht, indem ich nicht das gleiche Bild in zwei verschiedenen Größen, sondern verschiedene Bilder für Thumbnail und für die große Darstellung verwendet habe. ↩︎

                      1. @@Peter

                        Für mich ist das Problem damit gelöst.

                        Ähm nein, du hast gar nichts gelöst.

                        <a href="https://www.bilderhoster.net/users/usr/3wyf1ww1.jpg" target="_blank" >
                        <img src="https://www.bilderhoster.net/users/usr/3wyf1ww1.jpg" height="200" width="150" alt="https://www.bilderhoster.net/users/usr/3wyf1ww1.jpg" border="1" align="center">
                        </a>
                        

                        Dass es völlig sinnfrei ist, für Thumbnail und für die große Darstellung dieselbe Dilddatei zu verwenden, hat dir @Rolf B wiederholt gesagt. Und was tust du? Verwendest für Thumbnail und für die große Darstellung dieselbe Dilddatei‽ 🤡

                        Welche übrigens weder für Thumbnail noch für die große Darstellung taugt. Fürs Thumbnail ist sie mit 50 kB zu groß; das sollten maximal 20 kB sein. Für die große Darstellung ist das Bild viel zu unscharf.

                        Du musst zwei Bilddateien erstellen.[1] Dabei kann es sich anbieten, Höhe und Breite doppelt so groß zu machen wie das Bild dargestellt werden soll, aber hohe Kompression zu wählen. (Der hier oft verlinkte Artikel „Retina Revolution“ scheint depubliziert worden zu sein, ich finde nur noch dieses Follow-up auf niederländisch.)

                        Es hat geklappt, allerdings muss ich zum vergrössern auf das verkleinerte Bild mit der rechten Maustaste klicken und dann auf den Befehl "Bild im neuen Tab öffnen". Das Originalbild wird dann separat geöffnet.

                        Ähm nein, da muss man nicht mit rechter Maustaste und Kontextmenü ran. Das funktioniert mit der Verlinkung, siehe Lightbox, fallback with no JavaScript.

                        Mit JavaScript kann man da progressive enhancement machen: anstatt auf eine neue Seite zu wechseln öffnet die große Darstellung in einem modalen Fenster (dialog-Element) auf der bestehenden Seite.

                        Per JavaScript wird das Linkziel als src des Bildes im modalen Fenster gesetzt. (Was mit data-src auf einen anderen Wert gesetzt werden kann. Ebenfalls möglich: data-srcset für responsive images.) Lightbox, showModal()

                        Ein Gimmick ist das Thumbnail als Hintergrundbild. Kostet ja nix, das wurde ja bereits übertragen. Und für die kurze Zeit, in der das Bild für die große Darstellung geladen wird, ist ein unscharfes Bild besser als gar kein Bild.

                        🖖 Живіть довго і процвітайте

                        Für mich ist dennoch das Problem gelöst: Das Thumbnail sieht sauber und klar aus und auch die Vergrösserung aufs Originalbild auf einer separaten Seite ist klar und deutlich abgebildet. Also für mich alles ok.


                        1. Ich hab das in meinen Beispielen deutlich gemacht, indem ich nicht das gleiche Bild in zwei verschiedenen Größen, sondern verschiedene Bilder für Thumbnail und für die große Darstellung verwendet habe. ↩︎

                        1. @@Peter

                          Für mich ist dennoch das Problem gelöst:

                          Der Wurm muss dem Fisch schmecken, nicht dem Angler.

                          Das Thumbnail sieht sauber und klar aus

                          Wenn du deine Seite schon öfter aufgerufen hast, ist das Bild in deinem Browsercache und wird sofort angezeigt. Anders bei Nutzern, die zum ersten Mal auf deine Seite kommen: da muss die Bilddatei erst übertragen werden. Und je kleiner die ist, desto schneller wird sie übertragen und das Bild dargestellt. Deshalb muss das Thumbnail so klein wie möglich sein.

                          und auch die Vergrösserung aufs Originalbild auf einer separaten Seite ist klar und deutlich abgebildet.

                          Hast du noch einen alten Röhrenmonitor? Auf hochauflösenden Displays sieht’s unscharf aus.

                          Also für mich alles ok.

                          Sagte ich schon, dass der Wurm dem Fisch schmecken muss, nicht dem Angler?

                          🖖 Живіть довго і процвітайте

                          --
                          „Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“
                          — @Grantscheam auf Twitter
                      2. @@Gunnar Bittersmann

                        Ein Gimmick ist das Thumbnail als Hintergrundbild. Kostet ja nix, das wurde ja bereits übertragen. Und für die kurze Zeit, in der das Bild für die große Darstellung geladen wird, ist ein unscharfes Bild besser als gar kein Bild.

                        Funktioniert so nicht. Genauer gesagt: Funktioniert nur beim ersten Öffnen der Lightbox.

                        Ab dem zweiten Mal steht ja schon der URL des zuvor angezeigten Bildes im src-Attribut[1] und das falsche Bild wird blitzt kurz auf, bevor das anzuzeigende Bild geladen ist. Man müsste also src erst nullen.

                        Aber wenn man da sowieso ran muss, kann man auch gleich das Vorschaubild dort eintragen anstatt dieses als Hintergrundbild zu setzen. In meinem Codepen sieht’s jetzt so aus:

                        	// show enlarged preview image while big image is being loaded
                        	lightboxImage.src = lightboxThumbnail.src;
                        	requestAnimationFrame(() => {
                        		lightboxImage.src = lightboxThumbnail.dataset.src ?? lightboxLink.href;
                        	});
                        

                        🖖 Живіть довго і процвітайте

                        --
                        „Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“
                        — @Grantscheam auf Twitter

                        1. Genauer gesagt: in der src-Eigenschaft des Elementobjekts ↩︎

                        1. Aber wenn man da sowieso ran muss, kann man auch gleich das Vorschaubild dort eintragen anstatt dieses als Hintergrundbild zu setzen. In meinem Codepen sieht’s jetzt so aus:

                          	// show enlarged preview image while big image is being loaded
                          	lightboxImage.src = lightboxThumbnail.src;
                          	requestAnimationFrame(() => {
                          		lightboxImage.src = lightboxThumbnail.dataset.src ?? lightboxLink.href;
                          	});
                          

                          Warum an der Stelle requestAnimationFrame, wenn man doch zunächst einen Ladevorgang initiiert?

                          1. @@Mitleser 2.0

                            	// show enlarged preview image while big image is being loaded
                            	lightboxImage.src = lightboxThumbnail.src;
                            	requestAnimationFrame(() => {
                            		lightboxImage.src = lightboxThumbnail.dataset.src ?? lightboxLink.href;
                            	});
                            

                            Warum an der Stelle requestAnimationFrame, wenn man doch zunächst einen Ladevorgang initiiert?

                            Man muss dem Browser die Zeit geben, das Vorschaubild aus dem Cache in der Lightbox anzuzeigen, bevor man src wieder ändert.

                            Ohne das würde der Browser gleich das neue Bild anfragen und, solange das nicht geladen ist, kein Bild bzw. das vorige Bild anzeigen.

                            🖖 Живіть довго і процвітайте

                            --
                            „Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“
                            — @Grantscheam auf Twitter
                            1. Warum an der Stelle requestAnimationFrame, wenn man doch zunächst einen Ladevorgang initiiert?

                              Man muss dem Browser die Zeit geben, das Vorschaubild aus dem Cache in der Lightbox anzuzeigen, bevor man src wieder ändert.

                              Ohne das würde der Browser gleich das neue Bild anfragen und, solange das nicht geladen ist, kein Bild bzw. das vorige Bild anzeigen.

                              Ist das wirklich so? Theoretisch kann ich mir diese Race Condition nur vorstellen, wenn das Zielbild bereits im Browser-Cache liegt. Aber selbst dann hätte ich Zweifel. Die Änderung des SRC dürfte dann dennoch asynchron laufen, also mindestens einen Zyklus dauern. Ob mehr oder weniger als ein "AnimationFrame" weiß ich nicht.

                              Wenn ich das in Deinem Fiddle zumindest rausnehme, bemerke ich keinen Unterschied?

                              1. @@Mitleser 2.0

                                Wenn ich das in Deinem Fiddle

                                Fiddle??

                                zumindest rausnehme, bemerke ich keinen Unterschied?

                                Ich hab mal einen Fork ohne requestAnimationFrame erstellt. Im Firefox sehe ich genau das von mir beschriebene unerwünschte Verhalten. Chrome scheint etwas anders zu ticken.

                                Daran, für diesen Test den Browsercache auszuschalten, hast du aber gedacht?

                                🖖 Живіть довго і процвітайте

                                --
                                „Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“
                                — @Grantscheam auf Twitter
                                1. Ich hab mal einen Fork ohne requestAnimationFrame erstellt. Im Firefox sehe ich genau das von mir beschriebene unerwünschte Verhalten. Chrome scheint etwas anders zu ticken.

                                  Hmm... ich kann hier keinen Unterschied erkennen, was auch meiner Erwartungshaltung entspricht. Aber das muss nix bedeuten. An solchen Stellen habe ich schon oft viel mystische Magie seitens der Browserimplementationen beobachtet.

                                  Wirklich schlüssig scheint es mir dennoch nicht.

                                  Schlüssig wäre IMHO: auf das load-event des images warten und dann erst switchen. Bauchgefühl: mit dem requestAnimationFrame emulierst Du den Effekt ohne Load-Handler, den Du in Deinem Setup beobachten kannst.

                                  Daran, für diesen Test den Browsercache auszuschalten, hast du aber gedacht?

                                  Ja, klar. Mit und ohne :-)

                                  1. @@Mitleser 2.0

                                    Ich hab mal einen Fork ohne requestAnimationFrame erstellt. Im Firefox sehe ich genau das von mir beschriebene unerwünschte Verhalten. Chrome scheint etwas anders zu ticken.

                                    Hmm... ich kann hier keinen Unterschied erkennen

                                    Ich hab mal gefilmt: im Firefox erst auf das rechte Thumbnail 😝 geclickt, dann auf das linke 🤠.

                                    • ohne requestAnimationFrame blitzt beim Click auf das 2. Thumbnail  🤠 das vorige große Bild 😝 auf, bevor das neue große Bild 🤠 geladen wird. Meh.

                                    • mit requestAnimationFrame blitzt beim Click auf das 2. Thumbnail 🤠 ebendieses 🤠 groß auf, bevor das neue große Bild 🤠 geladen wird. So soll es sein.

                                    (Wie gesagt dienen die verschiedenen Bilder hier zur Veranschaulichung. Bei der wirklichen Anwendung werden das Thumbnail und das große Bild dasselbe Bild in verschiedenen Auflösungen sein.)

                                    🖖 Живіть довго і процвітайте

                                    --
                                    „Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“
                                    — @Grantscheam auf Twitter
                                    1. @@Gunnar Bittersmann

                                      Bei der wirklichen Anwendung werden das Thumbnail und das große Bild dasselbe Bild in verschiedenen Auflösungen sein.

                                      … ansonsten macht es keinen Sinn, dass Thumbnail als Platzhalter groß darzustellen, bis das richtige Bild geladen ist.

                                      Aber werden Thumbnail und das große Bild wirklich dasselbe Bild sein?

                                      Sinnvoller als die verkleinerte Darstellung ist als Thumbnail womöglich, einen markanten Ausschnitt des Bildes zu wählen und diesen dann nicht so stark zu verkleinern. Dann können auch alle Thumbnails in einer Galerie dieselbe Höhe und Breite haben – unabhängig von den Seitenverhältnissen der großen Bilder. Die Idee des Platzhalterbilds zur Verbesserung der percieved performance wäre damit hinfällig.

                                      🖖 Живіть довго і процвітайте

                                      --
                                      „Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“
                                      — @Grantscheam auf Twitter
                              2. Hallo Mitleser,

                                Die Änderung des SRC dürfte dann dennoch asynchron laufen, also mindestens einen Zyklus dauern.

                                Das wird sie definitiv tun. Und ich nehme an, das wird während der Layoutphase ausgelöst, also nachdem das aktuelle JavaScript beendet wurde.

                                Meines Wissens ist JavaScript so im Browser integriert, dass die Konsequenzen von asynchronen Verarbeitungen sich erst auswirken, wenn der laufende Makrotask der Eventqueue beendet ist.

                                Die HTML Spec ist wie üblich over-wordy dazu, aber die Kurzfassung ist: Die Event Loop verarbeitet einen Makrotask, dann die offenen Mikrotasks, dann kommt das Rendering und während des Renderings wird der Animation Frame Callback ausgeführt. Was bedeutet, dass dieser Callback eine Telefonzelle aus alten Zeiten ist:

                                Rolf

                                --
                                sumpsi - posui - obstruxi
            2. Hallo Rolf,

              Das "verschobene" Anführungszeichen vom src-Attribut (da steht ein Space davor statt dahinter) ist ein Kopierfehler ins Forum? Oder ist das tatsächlich so bei Dir? Es sollte eigentlich nichts ausmachen

              doch, sollte es. So ist nämlich ein abschließendes Leerzeichen Bestandteil des Ressourcennamens. Da würde also jemand 3wyf1ww1.jpg%20 anfordern.

              Einen schönen Tag noch
               Martin

              --
              Wie man sich bettet, so schallt es heraus.
              1. @@Der Martin

                Das "verschobene" Anführungszeichen vom src-Attribut (da steht ein Space davor statt dahinter) ist ein Kopierfehler ins Forum? Oder ist das tatsächlich so bei Dir? Es sollte eigentlich nichts ausmachen

                doch, sollte es.

                Weil?

                So ist nämlich ein abschließendes Leerzeichen Bestandteil des Ressourcennamens.

                Sagt wer?

                Egal, wer das sagt. Relevant ist, was die HTML-Spec sagt. Wir können mal zusammen reinschauen. Click.

                Es geht um ein Attribut des a-Elements. Elements. Click.

                Das a-Element versteckt sich unter 4.5 Text-level semantics. Click.

                Wir suchen nach dem href-Attribut. Click.

                “The href attribute on a and area elements must have a value that is a valid URL potentially surrounded by spaces.”

                Also nein:

                Da würde also jemand 3wyf1ww1.jpg%20 anfordern.

                Nix mit %20 am Ende.


                Das fehlende Leerzeichen zwischen " und nächstem Attribut ist tatsächlich ein Fehler. Sagt die Spec in §13.1.2.3 Attributes:

                “If an attribute using the double-quoted attribute syntax is to be followed by another attribute, then there must be ASCII whitespace separating the two.” (Dasselbe auch für single-quoted.)

                Ein Fehler, den Browser stillschweigend tolerieren. Desöfteren schon in der CSSBattle ausgenutzt. Siehe bspw. Target #111 unter Top Solutions.

                🖖 Живіть довго і процвітайте

                --
                „Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“
                — @Grantscheam auf Twitter
                1. @@Gunnar Bittersmann

                  Ein Fehler, den Browser stillschweigend tolerieren. Desöfteren schon in der CSSBattle ausgenutzt. Siehe bspw. Target #111 unter Top Solutions.

                    ⬤     ◆<body bgcolor=F3AC3C style="text-shadow:0 148q,-84q 74q,0-267q,0-162q,-62q -214q;font:142q/1'"text=25434>
                  

                  Da sind noch andere Optimierungen zu erkennen. V.h.n.v:

                  text=25434
                  Mitunter ist ein <body>-Tag mit bgcolor- und text-Attributen kürzer als background und color per CSS, insb. wenn wie hier durch einen nur 5stelligen RGB-Wert noch ein Zeichen gespart werden kann. Nicht nur # vorne, auch Nullen am Ende können weggelassen werden, 25434 ist dasselbe wie #254340. Die Vorgabe war #254241. Damit die Abweichung mit einem um 1 verminderten Blau-Wert immer noch 100%ig matcht, ist in diesem Fall der Grün-Wert um 1 zu erhöhen.
                  font:142q/1'
                  Eine Längenangabe in q (¼ mm) ist oft ein Zeichen kürzer als in einer anderen Einheit wie px.
                  Am Ende der letzen Deklaration in einem style-Element oder -Attribut können schließende Klammern oder Anführungszeichen weggelassen werden. '' ist ein gültiger Font-Bezeichner; Leerzeichen zwischen diesem und line height ist nicht erforderlich.
                  text-shadow:0 148q,-84q 74q,0-267q,0-162q,-62q -214q
                  Nach 0 ist keine Einheit nötig; zwischen 0 und - auch kein Leerzeichen. Zwischen q und - leider doch. Ansonsten könnten die anderen Leerzeichen durch + ersetzt werden und wenn der Wert des style-Attributs dann keine Leerzeichen mehr enthielte, könnten die Anführungszeichen darum entfallen.

                  Dass die Vorschau anders aussieht als die Vorlage, liegt daran, dass in dem Headless-Browser auf dem Server, der die Bewertung vornimmt, andere Fonts installiert sind als auf unseren Systemen. Da braucht man ein anderes Vorschau-Tool.

                  Und für produktive Webseiten git natürlich: All das oben Genannte nicht machen, Kinder!

                  🖖 Живіть довго і процвітайте

                  --
                  „Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“
                  — @Grantscheam auf Twitter
              2. Selbst testen

                <a href= "https://www.bilderhoster.net/users/usr/3wyf1ww1.jpg " target="_blank">
                <img src="https://www.bilderhoster.net/users/usr/3wyf1ww1.jpg "border="0" width="120" height="200">
                </a>
                

                Selbst anklicken:

                https://home.fastix.org/Tests/space-in-uri.html

                Das von Rolf aus der Spec zitierte

                “The href attribute on a and area elements must have a value that is a valid URL potentially surrounded by spaces.”

                sagt (auch mir) nichts darüber, was ein Browser wohl daraus macht: Immerhin sind Spaces (an jeder Stelle!) gültige Zeichen in Dateinamen (Linux):

                /tmp$ touch "spaceAm Ende "
                ll
                -rw-rw-r--  1 user group 0 Dez 18 09:48 'spaceAm Ende '
                

                Ich hätte das selbe Ergebnis wie Martin vermutet („Da würde also jemand 3wyf1ww1.jpg%20 anfordern.“) - aber zumindest Chromium zeigt nicht dieses Verhalten.

                Also: Vor mutigen Aussagen immer testen...

                Ich hab den Quelltext dennoch als „bad“ markiert, weil $andereSoftware auf den Fehler im HTML mehr „wahrscheinlich“ als „womöglich“ anders reagiert. Die Software (kann auch ein anderer Browser sein) könnte ja auch meckern statt spekulierend zu reparieren: Das ist es, was die Spec (einem Ganzgenauheimer wie mir) sagt, wenn diese eine „valide URL“ fordert - und das Ergebnis von solchen Reparaturversuchen vorhersagen zu wollen ist stets „mutig“: Vorliegend käme

                • spekulieren und fehlerhafte Stellen „URL-kodieren“ (Martins Vermutung, wird nicht gemacht),
                • spekulieren und „trimmen“ (wird von meinem Chromium gemacht) oder eben
                • nicht spekulieren, sondern „meckern“ (das würde ich tun)

                in Frage. Aber wenigstens wissen wir jetzt, warum die Browser so fett sind (300MB und mehr) wie früher ein ganzes Windows NT. Da dürften zahlreiche Regeln für spekulative Reparaturen etlichen Speicherbedarf haben.

                1. Moin,

                  Aber wenigstens wissen wir jetzt, warum die Browser so fett sind (300MB und mehr) wie früher ein ganzes Windows NT.

                  aus meinen Experimenten Ende der 90er, Anfang der 2000er Jahre weiß ich noch: Ein Windows 98 belegte bei einer Minimalinstallation (wie vom Installer angeboten) nur rund 50MB.

                  Da dürften zahlreiche Regeln für spekulative Reparaturen etlichen Speicherbedarf haben.

                  Möglich; ich denke, dass da auch die Entwicklertools einen erheblichen Anteil haben.

                  Einen schönen Tag noch
                   Martin

                  --
                  Falls ihr euch wundert, warum ihr zur Zeit so schlecht aus der Wohnung kommt:
                  Das ist so, weil Weihnachten vor der Tür steht. 🎄 🎄 🎄
                2. Hallo Raketenwilli,

                  Das von Rolf aus der Spec zitierte...

                  Ich bin doch gar kein Berliner. Aber ein Buchstabe von 6 richtig ist schon gar nicht schlecht 😉

                  Rolf

                  --
                  sumpsi - posui - obstruxi
  2. Hallo Peter,

    je nach Bildgröße ist es nicht sinnvoll, das Original zum Thumbnail herunterzuskalieren. Bei einem gut gepressten 50KB JPEG-Pfannkuchen mag es vertretbar sein, aber wenn das Original ein 4MB Foto ist (was für's Web ebenfalls schon schmerzhaft ist) und Du davon 10 Bilder als Thumbnail auf eine Seite packst, dann bekommt ein Nichtflatrate-Surfer auf seinem NichtLTE Handy zuerst wegen der Wartezeit einen Schreikrampf und danach noch einen, wenn er sein Datenvolumen entdeckt. Bzw. nicht mehr entdeckt.

    Nimm Dir die Zeit und erzeuge für deine Bilder echte Thumbnails. Versuche, die Originale als JPEG in einer sinnvollen Auflösung zu speichern. Lektüre im Self-Wiki.

    Rolf

    --
    sumpsi - posui - obstruxi