Bild Vorladen Funktion?

[DoNe]

Hallo liebe ATler,

ich bin gerade dabei eine Website in Form eines Portfolios aufzubauen.
Diese wird natürlich viele viele Bilder beinhalten.

Beim Aufruf der Seite wird eine Page gezeigt auf welcher man mein Logo sieht und den Hinweis: "Bitte warten Bilder werden geladen!"

Gibt es eine Funktion, die ich im HTML oder in der CSS einfügen kann, die sämtliche Bilder beim Aufruf der Seite vorlädt und somit die Wartezeit beim durchstöbern der Bilder gen Null bringt?

LG,
Done

[gKar]

HTML und CSS sind Beschreibungssprachen für Daten und Formate, die können grundsätzlich keine Funktionen enthalten.
Funktionen, die der Browser ausführen soll, kannst Du in JavaScript schreiben.

Aber das Problem wird nicht klar: Wie kann eine Funktion, die erst ausgelöst wird, wenn die Seite geladen wurde, dafür sorgen, dass die Bilder schon geladen sind, bevor die Seite geladen wurde? Das ergibt keinen Sinn, oder? Wann soll denn das „Vorladen“ ausgelöst werden, wenn nicht frühestens beim Aufruf Deiner Webseite?

[DoNe]

Ich hab doch geschrieben "beim Aufruf der Seite" damit meine ich das Aufrufen meiner Website!
Zu genau dem zeitpunkt sollen alle Bilder vorgeladen werden, welche auf den Nachfolgenden Seiten angezeigt werden.

Ich hab da auch schon einen Quellcode gefunden:
HTML:
<div id="preload">
<img src="...">
<img src="...">
<img src="...">
hier halt alle Bilder der Website...
</div>

und hier CSS:
#preload { display: none }
#preload img { height: 0; width: 0; border: none; position: absolute; bottom: 0; left: 0; z-index: -30; }

Mir stellt sich jetzt nur die Frage, ob die ganzen Bilder, welche auf der "Intro-Page" vorgeladen werden beim verlassen dieser Seite geladen bleiben.

Diese Intro-Page soll nämlich nur als Welcome-Page dienen und führt dann zur Homepage.

[JvW]

ich glaube, eine solche Seite würde ich kein zweites Mal aufsuchen ...

mache eine "Vorschau" in Internet-Qualität und lade große Bilder nur dann, wenn jemand sie auch sehen will

[hokage]

Stimme JvW zu! Thumbnails ist das Stichwort und brauchst du große Bilder für das Seitendesign, dann verringere die Dateigröße z.B. durch eine Reduzierung der Auflösung. Überflüssiger Quellcode kostet im Übrigen auch Zeit beim laden, also den Code der Website zu entschlacken schadet auch nicht.

Der HTML und CSS Code bringt dich bei deinem "Problem" nicht weiter. Der Code sagt nur aus, dass alle Bilder auf dieser Seite geladen werden, aber eben durch display:none; nicht sichtbar sind. Öffnet sich durch einen Link eine neue Seite müssen die dort verwendet Bilder auch wieder laden, vorausgesetzt es sind neue, und der Nutzer hat sie durch erstmaliges Laden nicht schon im Cache.

grüße

[gKar]

Ich hab doch geschrieben "beim Aufruf der Seite" damit meine ich das Aufrufen meiner Website!

Page = Seite ≠ Site

Der von Dir genannte Code funktioniert durchaus für alle User, die die Startseite aufrufen. Elegant ist das nicht: Der Browser wird noch Aktivität anzeigen (also dass die Seite noch nicht vollständig geladen wurde), so lange er die unsichtbaren Bilder in den Cache lädt. Und wenn der User nie all die Bilder ansehen wird, soll er sie dennoch laden?

Für die Präsentation vieler Fotos gibt es übrigens extrem vielfältige JavaScript-Galleries, die teilweise auch in der Lage sein sollten, beim Durchblättern durch Fotos jeweils genau das nachfolgende Foto "prezuloaden".