Bilder im Voraus laden

Hi,

ich habe ein, zwei bildergalerien, die als liste in etwa so aufgebaut sind:

<a href="./grosses-bild.jpg"><img src="./thumb.jpg" /></a>

wenn ich mir die bilder ansehen will, werden die großen bilder entsprechend nachgeladen.

vor kurzem bin ich dann im netz auf “prefetching” gestoßen - also mittels rel-attribut eine datei zum vorzeitigen download zu markieren.

[code]

[/code] allerdings waren dort auch einige widersprüchliche aussagen zu finden.

kann mir jemand genauer sagen, wie das aussieht? ich habe nur etwas über firefox gefunden, wie sieht die unterstützung bei den anderen browser aus?
ausserdem waren auch was von rel=“next” zu lesen, ich bin daher verunsichert, was gilt, oder ob beides geht oder wie auch immer…
stimmt es, dass das runterladen der dateien, die ich zum prefetchen angebe, erst nach dem laden der eigentlichen seite beginnen?
(weißt jemand, ob piwik erkennt, dass dinge ge-prefetcht werden?)

danke im voraus

mfg
emil

Normativ ist da nichts, insofern ist es kein Wunder, daß es da widersprüchliche Aussagen gibt.
Erstmals erwähnt wird der Wert prefetch für rel von link im Arbeitsentwurf für HTML5.
Demzufolge kann das sinnvoll notiert werden, wenn die referenzierte Datei höchstwahrscheinlich
vom Nutzer demnächst benötigt wird.
Bei einer Bildergalerie mit Vorschaubildern ist das nicht unbedingt der Fall. Die Vorschaubilder
dienen ja gerade dazu, daß der Nutzer sich aussuchen kann, was er sich in voller Größe
angucken will, da ist es unsinnig, alle Bilder im voraus zu laden ;o)
Wenn man unbedingt will, daß der Nutzer alle Bilder in voller Größe läd, sollte man die
Vorschaubilder einfach weglassen und gleich alles in voller Größe einbinden.

Wie vorgegangen wird, um eine internet-Seite darzustellen, die sich aus mehreren Dokumenten
zusammensetzt, ist nicht eindeutig festgelegt.
Was aber wohl oft gemacht wird und auch ganz plausibel ist, ist daß die darzustellende
Hauptdatei während des Ladens analysiert wird. Über ein paar weitere Anfragen kann der
browser dann weitere Dateien anfordern, die er für die Darstellung wohl brauchen wird.
Zum einen kann er da nach der Reihenfolge des Erscheinens im Quelltext vorgehen, bei
parallelen Aufrufen kann er aber natürlich auch den Dateien den Vorzug geben, die er
vermutlich als nächstes braucht, um einen Teil der Seite brauchbar darzustellen.
Bei ersterer, einfacher Methode wären die im head referenzierten Dateien (auch CSS-Dateien)
ziemlich früh dran, weil sie weit vorne im Quelltext stehen. Später im Quelltext stehende
Bilder würden dann wohl erst später entdeckt. Wenn man nun so ein prefetch im Kopf
stehen hat, könnte es dann ja sein, daß das große Bild vor den Vorschaubildern geladen wird ;o)
Bei geschickterer Programmierung würde ein browser aber diese link-Elemente erstmal
nicht berücksichtigen und einfach erstmal die Hauptdatei zuendeladen und analysieren und
dann gucken, was von den vorgeschlagenen prefetch-Referenzen vermutlich wirklich zuerst
gebraucht werden könnte.

Betreiber von servern und auch viele Nutzer mögen es natürlich nicht unbedingt, wenn ein
browser haufenweise mutmaßlich erstmal unnützes Zeug läd, weswegen die Beteiber von
servern oft den parallelen Zugriff beschränken und Nutzer solche Funktionen am browser
deaktivieren oder als fehlerhaft ansehen. Daher wird es da vermutlich kaum jemals eine
wirklich zuverlässige Funktion für sowas geben.

[quote]Bei einer Bildergalerie mit Vorschaubildern ist das nicht unbedingt der Fall. Die Vorschaubilder
dienen ja gerade dazu, daß der Nutzer sich aussuchen kann, was er sich in voller Größe
angucken will, da ist es unsinnig, alle Bilder im voraus zu laden ;o)
Wenn man unbedingt will, daß der Nutzer alle Bilder in voller Größe läd, sollte man die
Vorschaubilder einfach weglassen und gleich alles in voller Größe einbinden.[/quote]
das kommt sicherlich auf den fall an, in meinem fall solltest du das schon mir überlassen. denn für mich dienen die vorschaubilder nur als grobe übersicht, was zur verfügung steht.
würde ich, wie du sagst, alles gleich in voller größe einbinden sieht der user nur leere flecken auf denen sich ganz ein paar bilder aufbauen.
das hat schon so seine richtigkeit, überlass den einsatzzweck mal mir :wink:

[quote]Betreiber von servern und auch viele Nutzer mögen es natürlich nicht unbedingt, wenn ein
browser haufenweise mutmaßlich erstmal unnützes Zeug läd, weswegen die Beteiber von
servern oft den parallelen Zugriff beschränken und Nutzer solche Funktionen am browser
deaktivieren oder als fehlerhaft ansehen. Daher wird es da vermutlich kaum jemals eine
wirklich zuverlässige Funktion für sowas geben.[/quote]
das ist bei den betreibern klar und selbstverständlich. allerdings interessiert es einen durchschnittsnutzer herzlich wenigst. solange die eigentliche seite priorität hat zumindest.
volumentarife gibt es praktisch nicht mehr, und mobil-teile mit knebelverträgen sollen in diesem szenario nicht berücksichtigt werden. (wobei die meisten da auch ne flatrate haben und sich freuen wenn im hintergrund schonmal alles geladen wird, und sie nicht ewig warten müssn wenn sie wo draufklicken - google instant machts vor :wink: )

[quote]Wenn man nun so ein prefetch im Kopf
stehen hat, könnte es dann ja sein, daß das große Bild vor den Vorschaubildern geladen wird ;o)
Bei geschickterer Programmierung würde ein browser aber diese link-Elemente erstmal
nicht berücksichtigen und einfach erstmal die Hauptdatei zuendeladen und analysieren und
dann gucken, was von den vorgeschlagenen prefetch-Referenzen vermutlich wirklich zuerst
gebraucht werden könnte.[/quote]
daher meine frage, macht ja schließlich nur sinn, wenn er rel=“prefetch” nach der eigentlichen seite im hintergrund weiterlädt.

Nun, wie erwähnt, das Verhalten der browser ist nicht definiert, und einige Anbieter werden da
auch nicht genau erklären, wie ihre Algorithmen aussehen, zumal ja gern darüber verglichen
oder geworben wird, wer eine komplizierte Seite schnell darstellen kann ;o)

Wenn man generell vergleicht, was darüber im HTML5-Entwurf steht und was etwa dazu in
SVG tiny 1.2 oder SMIL korrespondiert, kann man gut verstehen, warum das bei HTML5 nur
schwammig-optional in einem kleinen Absatz erwähnt wird - die Konstruktion ist so nicht
präzise genug. Bei SVG etwa ist das genauer definiert, da dient der Kram aber (ebenfalls
optional) eher dazu, daß Video- und Audio-Dateien ruckelfrei abgespielt werden, was das
Darstellungsprogramm hinbekommen kann, wenn es die entsprechenden Anteile von großen
Dateien läd, bevor begonnen wird, das Video abzuspielen.
Bei diesem rel-Wert hingegen ist ja komplett offengelassen, wozu da was vorweg geladen werden
soll - ich sehe da auch eher einen Sinn, wenn in der (X)HTML-Datei selbst ein größeres Video
drinsteht, was ruckelfrei abgespielt werden können soll - ohne weitere Parameter sollte dann
der browser das parallel zur Hauptdatei anfordern und das Video dann abspielbar haben, sobald
die (X)HTML-Seite komplett dargestellt ist.
In der Interpretation wäre es dann sinnvoll, daß der browser das prefetch-Dokument anfordert,
sobald er das link-Element im Kopf analysiert hat, damit das Video gestartet werden kann,
sobald die (X)HTML dargestellt ist, in der das Video eingebettet ist. Da wäre es dann sehr
kontraproduktiv, wenn der browser erst das komplette (X)HTML-Dokument mit CSS und
Bildern etc analysieren und laden würde, denn dann hätte prefetch keinen Sinn mehr -
sobald der browser beim Element video oder object angekommen ist, würde er ja ohnehin
bereits versuchen, die Datei herunterzuladen.
Daher scheint es mir zweifelhaft, diese prefetch-Funktion für ein Folgedokument zu verwenden
wie bei solch einer Bildergalerie - das kann auch die Darstellung des Hauptdokumentes mit
unmittelbar gebrauchten Dateien wie CSS und Vorschaubildern verzögern, wenn der server
etwa die Anzahl der parallelen Zugriffe pro IP auf zwei reduziert hat, somit der prefetch einer
großen Datei weitere Zugriffe erstmal blockiert.
So oder so wird sich bei HTML5 aber wohl erst in den kommenden Jahren etablieren, wofür
diese Funktion nun wirklich gebraucht wird und ich denke, die browser-Anbieter werden dann
allmählich ihre Algorithmen optimieren anhand der Probleme, die mehr oder weniger sinnvolle
Dokumente in der freien Wildbahn machen (im Zweifelsfalle heißt das, Angaben des Autors
ignorieren, wenn der server nicht mehr als zwei parallele Zugriffe zuläßt und selber schätzen,
was in welcher Reihenfolge geladen werden soll ;o)

Du kannst die Grafiken einfach in dein Dokument einbetten und per style-sheet vor dem User verbergen. Simpel. Effektiv.

/edit: Wenn du Sie dann nochmal referenzierst und Cache(s) aktiviert sind sollten sie entsprechend von dort bezogen werden oder du benutzt direkt das bereits geladene DOM Element.