Bilder vorladen – wird nicht in der Netzwerkanalyse angezeigt

[Christian Wansart]

Guten Morgen,

ich habe ein Array mit Bild-Adressen, welche ich versuche vorzuladen. Über die Entwicklerwerkzeuge habe ich versucht die Funktionalität nachzuprüfen, jedoch ist dort nichts zu sehen.

Das folgende Array enthält noch weitere Daten, die allerdings nicht weiter von Interesse sind – deshalb nicht über die Verschachtelung wundern.

var route = [{
	greeterImages: [
		'temp-bilder/ddorf.jpg'
	]
},{
	greeterImages: [
		'temp-bilder/capetown.jpg'
	]
},{
	greeterImages: [
		'temp-bilder/stellenbosch.jpg'
	]
}];

Nach dem Laden des DOM versuche ich sie, wie ich in verschiedenen Quellen gelesen habe, durch ein Erzeugen eines Image-Objekts und dem Setzen dessen src-Attributs vorzuladen.

document.addEventListener("DOMContentLoaded", function(e) {
	route.forEach(function(current) {
		for(var i in current.greeterImages) {
			var src = current.greeterImages[i];
			current.greeterImages[i] = new Image();
			current.greeterImages[i].src = src;
		}
	});
});

Doch leider werden diese Daten in der Netzwerkanalyse in den Entwickler-Werkzeugen nicht angezeigt. Habe ich etwas übersehen?

Freundliche Grüße
Christian

[Nachtwächter]

Hm.

Etwas wie:

    <!-- preload für Images -->
        <div style="position: absolute; overflow: hidden; left: -9999px; top: -9999px; height: 1px; width: 1px;">
            <img src="/ico/directory-up.svgz" alt="">
            <img src="/ico/gray-down.svgz" alt="">
            <img src="/ico/gray-up.svgz" alt="">
            <img src="/ico/load.gif" alt="">
        </div>
    <!-- / preload -->

ist ja auch viel zu einfach... wenn es doch mit jeder Menge Javascript irre kompliziert und richtig fehlerträchtig geht...

[Christian Wansart]

Guten Morgen Nachtwächter,

    <!-- preload für Images -->
        <div style="position: absolute; overflow: hidden; left: -9999px; top: -9999px; height: 1px; width: 1px;">
            <img src="/ico/directory-up.svgz" alt="">
            <img src="/ico/gray-down.svgz" alt="">
            <img src="/ico/gray-up.svgz" alt="">
            <img src="/ico/load.gif" alt="">
        </div>
    <!-- / preload -->

ist ja auch viel zu einfach... wenn es doch mit jeder Menge Javascript irre kompliziert und richtig fehlerträchtig geht...

Ich hätte eine HTML-Lösung vorgezogen, jedoch bekomme ich die Daten vom Server als JSON. Entsprechend habe ich da gar keine andere Möglichkeit.

Freundliche Grüße
Christian

[Nachtwächter]

Ich hätte eine HTML-Lösung vorgezogen, jedoch bekomme ich die Daten vom Server als JSON. Entsprechend habe ich da gar keine andere Möglichkeit.

Wenn der Server json liefern kann, dann kann er auch html liefern. Im übrigen gäbe es da noch das gute alte document.write. Einfach den div setzen, dann stur und dumm die Zeilen schreiben, den div schließen.

Und so prüfen alte Hasen, ob der beabsichtigte Vorgang überhaupt stattfindet:

document.addEventListener("DOMContentLoaded", function(e) {
	route.forEach(function(current) {
		for(var i in current.greeterImages) {
			var src = current.greeterImages[i];
			current.greeterImages[i] = new Image();
			current.greeterImages[i].src = src;
                        console.log('current.greeterImages[' + i + '].src = "' + src + '"');
		}
	});
});

[Christian Wansart]

Guten Morgen,

der Code wird ausgeführt. Dennoch keine Anzeige in der Netzwerkanalyse – weder im Chrome noch im Firefox.

current.greeterImages[0].src = "temp-bilder/ddorf.jpg"
current.greeterImages[0].src = "temp-bilder/capetown.jpg"
current.greeterImages[0].src = "temp-bilder/stellenbosch.jpg"

Freundliche Grüße
Christian

[Nachtwächter]

Guten Morgen,

der Code wird ausgeführt. Dennoch keine Anzeige in der Netzwerkanalyse – weder im Chrome noch im Firefox.

current.greeterImages[0].src = "temp-bilder/ddorf.jpg"

Und was ist bitte current.greeterImages[0]? Etwa ein Bild in einem versteckten div? Dann wird es auch nicht geholt.

[Christian Wansart]

Guten Morgen,

Und was ist bitte current.greeterImages[0]? Etwa ein Bild in einem versteckten div? Dann wird es auch nicht geholt.

Nein, ich habe deine Ausgabe lediglich hinzugefügt. Es wird in kein div oder dergleichen geladen.

Laut den Quellen, die ich über Google fand, müsste das eigentlich zum Vorladen ausreichen – was laut der Netzwerkanalyse aber nicht der Fall ist. Jetzt frage ich mich: wer irrt sich? Die Quellen oder die Netzwerkanalyse?

Freundliche Grüße
Christian

[Nachtwächter]

wer irrt sich? Die Quellen oder die Netzwerkanalyse?

Der Martin irrt sich (jedenfalls hier) nicht.

Wenn schon js, dann geht das viel einfacher;

document.addEventListener("DOMContentLoaded", function(e) {
        var imageCache = new Array();
	for (i=0, i < route.count(), i++) {
		imageCache[i] = new Image();
		imageCache[i].src = route[i].greeterImages;
	};
});

[Nachtwächter]

route.count(),

route.length natürlich.

Flache Version für node:

var route = [{
        greeterImages: [
                'temp-bilder/ddorf.jpg'
        ]
},{
        greeterImages: [
                'temp-bilder/capetown.jpg'
        ]
},{
        greeterImages: [
                'temp-bilder/stellenbosch.jpg'
        ]
}];

function Image() {
        src='';
}

function foo() {
    for(i=0; i < route.length; i++) {
        var src = route[i].greeterImages[0];
        console.log(typeof(route[i].greeterImages[0]));
        route[i].greeterImages[0] = new Image();
        console.log(typeof(route[i].greeterImages[0]));
        route[i].greeterImages[0].src = src;
        console.log(route[i].greeterImages[0].src);
     }
};

foo();

[Der Martin]

Hallo,

der Code wird ausgeführt. Dennoch keine Anzeige in der Netzwerkanalyse – weder im Chrome noch im Firefox.

current.greeterImages[0].src = "temp-bilder/ddorf.jpg"
current.greeterImages[0].src = "temp-bilder/capetown.jpg"
current.greeterImages[0].src = "temp-bilder/stellenbosch.jpg"

sind das tatsächlich direkt aufeinanderfolgende Zuweisungen an dasselbe Objekt, die sich immer wieder überschreiben? Dann würde ich erwarten, dass das letzte Bild dieser Sequenz geladen wird, die übrigen aber nicht.

Grund ist, dass Javascript die Wirkung solcher Zuweisungen, also das Anfordern von HTTP-Ressourcen, erst ausführt, wenn das Script beendet ist oder in einem Wartezustand pausiert. Deshalb haben von n Zuweisungen die ersten n-1 keine Wirkung.

So long,
 Martin

[Christian Wansart]

Guten Morgen Martin,

sind das tatsächlich direkt aufeinanderfolgende Zuweisungen an dasselbe Objekt, die sich immer wieder überschreiben? Dann würde ich erwarten, dass das letzte Bild dieser Sequenz geladen wird, die übrigen aber nicht.

Nein, da current sich ändert. Es sind also

route[0].greeterImages[0] = 'bild1.jpg';
route[1].greeterImages[0] = 'bild1.jpg';
route[2].greeterImages[0] = 'bild1.jpg';

Grund ist, dass Javascript die Wirkung solcher Zuweisungen, also das Anfordern von HTTP-Ressourcen, erst ausführt, wenn das Script beendet ist oder in einem Wartezustand pausiert. Deshalb haben von n Zuweisungen die ersten n-1 keine Wirkung.

Ach so, das muss man natürlich wissen. Interessanterweise tauchen die Bilder gar nicht in der Netzwerkanalyse auf. Nicht einmal, wenn die Bilder angezeigt werden.

Ich glaube fast, dass sie vom Browser geladen werden, ohne dass die Netzwerkanalyse das bemerkt.

Freundliche Grüße
Christian

[Gunnar Bittersmann]

@@Nachtwächter

        <div style="position: absolute; overflow: hidden; left: -9999px; top: -9999px; height: 1px; width: 1px;">

Dass das keine gute Idee ist, sollte sich inzwischen überall herumgesprochen haben.

LLAP 🖖

[marctrix]

Hej Gunnar,

@@Nachtwächter

        <div style="position: absolute; overflow: hidden; left: -9999px; top: -9999px; height: 1px; width: 1px;">

Dass das keine gute Idee ist, sollte sich inzwischen überall herumgesprochen haben.

Zumal ein Pixel reichen würde:

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

Marc

[marctrix]

Hej Nachtwächter,

    <!-- preload für Images -->
        <div style="position: absolute; overflow: hidden; left: -9999px; top: -9999px; height: 1px; width: 1px;">
            <img src="/ico/directory-up.svgz" alt="">
            <img src="/ico/gray-down.svgz" alt="">
            <img src="/ico/gray-up.svgz" alt="">
            <img src="/ico/load.gif" alt="">
        </div>
    <!-- / preload -->

Das würdest du dann am Seitenende einbauen? - Aber wozu, sieht nach Bildern aus, die eh nicht benötigt wurden (sonst wären sie ja bereits geladen worden)?

Es mag sinnvolle Anwendungen geben. Mir fällt mal wieder keine ein.

Wozu setzt du das Vorladen denn ein, @Christian Wansart?

Gerade bei Bildern kann das ja sehr viel (unnötiger) Traffic sein, den ich in meinem Mobilfunktarif sehr teuer bezahlen muss...

Marc

[Nachtwächter]

Wozu setzt du das Vorladen denn ein, @Christian Wansart?

Ich offensichtlich für eine Tabelle, welche den Inhalt eines Verzeichnisses wiedergibt und sortiert wird.

[marctrix]

Hej Nachtwächter,

Wozu setzt du das Vorladen denn ein, @Christian Wansart?

Ich offensichtlich für eine Tabelle, welche den Inhalt eines Verzeichnisses wiedergibt und sortiert wird.

???

Marc

[Nachtwächter]

Ich offensichtlich für eine Tabelle, welche den Inhalt eines Verzeichnisses wiedergibt und sortiert wird.

???

Ich meinte natürlich für deren "Verschönerung" bzw. die Anzeige der gewählten Sortierrichtung. Lade ich nicht vor, dann geht das Sortieren u.U. schneller als das Nachladen des Pics.

[marctrix]

Hej Nachtwächter,

Ich offensichtlich für eine Tabelle, welche den Inhalt eines Verzeichnisses wiedergibt und sortiert wird.

???

Ich meinte natürlich für deren "Verschönerung" bzw. die Anzeige der gewählten Sortierrichtung. Lade ich nicht vor, dann geht das Sortieren u.U. schneller als das Nachladen des

Verwende doch ein Sprite, bzw laden vor, wenn einer mit der Maus über die entsprechende th fährt - dann ist die Wahrscheinlichkeit, dass das entsprechende Bild benötigt wird, schon sehr viel größer. Aber wie gesagt wäre hier ein (SVG-Sprite) sinnvoller.

Marc

[Christian Wansart]

Wozu setzt du das Vorladen denn ein, @Christian Wansart?

Ich offensichtlich für eine Tabelle, welche den Inhalt eines Verzeichnisses wiedergibt und sortiert wird.

Ich jedoch nicht.

Freundliche Grüße
Christian

[Christian Wansart]

Guten Morgen Marc,

Wozu setzt du das Vorladen denn ein, @Christian Wansart?

Es soll eine Strecke (OpenSteetMaps/GoogleMaps/andere) abgefahren werden und nach jedem Halt ein entsprechendes Bild angezeigt werden. Damit hier nichts nachgeladen werden muss, sollen die Bilder gleich am Anfang vorgeladen werden.

Gerade bei Bildern kann das ja sehr viel (unnötiger) Traffic sein, den ich in meinem Mobilfunktarif sehr teuer bezahlen muss...

Dessen bin ich mir durchaus bewusst, es sind aber in der Regel nur rund 6-10 Bilder. Die Nutzer werden in diesem Fall in der Regel im WLAN sein, daher ist das hier kein großes Problem. Eine Verzögerung wäre hier schlimmer.

Freundliche Grüße
Christian

[marctrix]

Hej Christian,

Wozu setzt du das Vorladen denn ein, @Christian Wansart?

Es soll eine Strecke (OpenSteetMaps/GoogleMaps/andere) abgefahren werden und nach jedem Halt ein entsprechendes Bild angezeigt werden. Damit hier nichts nachgeladen werden muss, sollen die Bilder gleich am Anfang vorgeladen werden.

Dessen bin ich mir durchaus bewusst, es sind aber in der Regel nur rund 6-10 Bilder. Die Nutzer werden in diesem Fall in der Regel im WLAN sein, daher ist das hier kein großes Problem. Eine Verzögerung wäre hier schlimmer.

Sehe ich genauso, zumal das "Abfahren" ja der Sinn dieser Seite ist, wenn ich das recht verstehe, und die Bilder in jedem Fall benötigt werden.

Vermutlich würde ich die Bilder dann so wie von @Nachtwächter vorgeschlagen am Seitenende einbinden und per JavaScript Klassen ändern, so dass die Bilder zum gewünschten Zeitpunkt an der richtigen Stelle angezeigt werden.

Dann sollten sie auch als geladene Ressource sichtbar sein/werden...

Marc

[Christian Wansart]

Guten Abend Marc,

danke für deinen Vorschlag. Ich denke, ich habe einfach irgendwo einen Fehler gemacht oder den Cache nicht ordentlich geleert. Als ich gerade ein separates Beispiel erstellt habe, musste ich feststellen, dass das geht. Ich habe keine Ahnung was ich übersehen habe.

Hier die Auflösung...

Vielen Dank für deine Hilfe.

Freundliche Grüße
Christian

[dedlfix]

Tach!

Nach dem Laden des DOM versuche ich sie, wie ich in verschiedenen Quellen gelesen habe, durch ein Erzeugen eines Image-Objekts und dem Setzen dessen src-Attributs vorzuladen.

Vielleicht denkt sich der Browser: Wozu laden, wenn das Image nicht im DOM ist und somit gar nicht angezeigt werden kann?

Doch leider werden diese Daten in der Netzwerkanalyse in den Entwickler-Werkzeugen nicht angezeigt. Habe ich etwas übersehen?

Ein Filter, der die Bilder ausklammert, ist nachgeprüft nicht gesetzt?

dedlfix.

[Christian Wansart]

Guten Abend,

Vielleicht denkt sich der Browser: Wozu laden, wenn das Image nicht im DOM ist und somit gar nicht angezeigt werden kann?

Das wäre natürlich die schlaueste Variante. Daran hatte ich nicht gedacht.

Ein Filter, der die Bilder ausklammert, ist nachgeprüft nicht gesetzt?

Nein, das war alles aus. In meinem Programm wurde für die OpenStreetMap jede Menge Bilder geladen, die wurden angezeigt. Aber ich denke, es war ein Caching-Problem. In einem Codepen habe ich einen kleinen Test geschrieben. Lange Rede kurzer Sinn: dort ging es! Ich weiß nicht genau warum das passierte.

Vielen Dank für deine Antwort.

Freundliche Grüße
Christian

[Gunnar Bittersmann]

@@Christian Wansart

Doch leider werden diese Daten in der Netzwerkanalyse in den Entwickler-Werkzeugen nicht angezeigt. Habe ich etwas übersehen?

Die Anzeige der Daten in der Netzwerkanalyse in den Entwickler-Werkzeugen vielleicht? SCNR.

Soll heißen: Ich kann das Problem nicht nachvollziehen. Im Firefox sehen ich in der Netzwerkanalyse, dass die Bildressourcen geladen werden.

LLAP 🖖

[Christian Wansart]

Guten Abend Gunnar,

Soll heißen: Ich kann das Problem nicht nachvollziehen. Im Firefox sehen ich in der Netzwerkanalyse, dass die Bildressourcen geladen werden.

Ich habe mal ein separates Beispiel geschrieben, welches das Problem verdeutlicht. Allerdings merke ich gerade, dass in einem privaten Tab, die Bilder geladen werden, meine ursprüngliche Aussage also nicht zutrifft.

Und zwar hatte mich folgende Anzeige irritiert, weswegen ich dachte, es würde nicht geladen werden. Ich schätze mal, dass mir der Cache da ein Strich durch die Rechnung gemacht hatte und deshalb nicht angezeigt wurde. Siehe: https://i.imgur.com/Ik7bqga.png und der dazugehörige Code: https://codepen.io/Ctwx/pen/RREoQg

Dankeschön für deine Antworten. Hmm...

Lebe lang und in Frieden.

[Verwechselung]

Hi,

Sorry für den rüden Ton. Das ist hier leider üblich. Du hast recht: Firefox läd die Bilder nicht vor, wenn sie nicht tatsächlich mit einer Mindestgrösse von 1px angezeigt werden. Einzige Lösung hier: Das Einbinden der Bilder in den Quellcode als base64. Hat bei meinen zeitkritischen Anwendungen wunderbar funktioniert :-)

Viel Erfolg und schreib in Zukunft hier nicht mehr unter Klarnamen ;)

[Matthias Apsel]

Hallo Verwechselung,

Sorry für den rüden Ton.

Wo hast du den Eindruck eines rüden Tons in diesem Thread?

Das ist hier leider üblich.

Ich glaub nicht.

Du hast recht: Firefox läd die Bilder nicht vor, wenn sie nicht tatsächlich mit einer Mindestgrösse von 1px angezeigt werden. Einzige Lösung hier: Das Einbinden der Bilder in den Quellcode als base64. Hat bei meinen zeitkritischen Anwendungen wunderbar funktioniert :-)

Auch das ist nicht unproblematisch. Siehe https://wiki.selfhtml.org/wiki/Grafik/Grafiken_mit_Data-URI#Gegen.C3.BCberstellung

Vielleicht wäre es schön, wenn alle Bilder als eine Art "Filmstreifen" bereits am unteren Bildschirmrand sichtbar sind?

Viel Erfolg und schreib in Zukunft hier nicht mehr unter Klarnamen ;)

Das hier ist nicht facebook.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Verwechselung

Sorry für den rüden Ton. Das ist hier leider üblich.

Find ich gut, wenn hier immer wieder Leute auftauchen und sagen, was hier üblich ist, obwohl sie (unter diesem Namen) hier noch nie gesehen wurden. Nicht.

Du hast recht: Firefox läd die Bilder nicht vor, wenn sie nicht tatsächlich mit einer Mindestgrösse von 1px angezeigt werden.

Dass das nicht stimmt, hatte ich bereits gesagt.

Einzige Lösung hier: Das Einbinden der Bilder in den Quellcode als base64. Hat bei meinen zeitkritischen Anwendungen wunderbar funktioniert :-)

*Prust* Base64 (was die zu übertragende Datengröße deutlich aufbläht) und „zeitkritisch“ in einem Satz. Was haben wir gelacht.

Viel Erfolg und schreib in Zukunft hier nicht mehr unter Klarnamen ;)

Gib in Zukunft nicht mehr unsinnige Ratschläge!

LLAP 🖖

[Nachtwächter]

Aber nicht, dass ich hier von Einzelnen mit dem oder der "Verwechselung" verwechselt werde…

[Christian Kruse]

Hallo Nachtwächter,

Aber nicht, dass ich hier von Einzelnen mit dem oder der "Verwechselung" verwechselt werde…

Wenn du dich registrierst, wird dein Name geschützt (neben anderen Annehmlichkeiten).

LG,
CK

[Christian Wansart]

Guten Abend,

ich habe nicht mit 1px gearbeitet, insofern. Ich habe allerdings einen Fehler gemacht und scheinbar gefunden, siehe meinen entsprechenden Beitrag.

Ich weiß nicht was der Klarname damit zu tun hat. Vielleicht ist das ja auch gar nicht mein Klarname, sondern ein Künstlername? Abgesehen davon halte ich es nicht für schlimm in einem Forum einen Klarnamen zu verwenden, vor allem wenn ich versuche neues Wissen anzueignen, Fehler auszubessern und insgesamt mich zu verbessern. Wenn mir das peinlich wäre und ich keine Fehler machen würde, müsste ich nicht nachfragen. ;-)

Freundliche Grüße
Christian