[MarkusK]

Hallo!
Ich baue eine Website für hohe auflösungen, also sind meine Grafiken auch dementsprechend groß.
Besonders meine header Grafik ist ein Problem, das sie von Seite zu Seite unterschiedlich ist und vom CMS dynamisch eingebunden wird. Ich bin jetzt darauf gekommen, dass ich ein JavaScript einbaue, das eine wesentlich kleinere (also verpixelte) Grafik einbinde, bis die eigentliche Grafik geladen ist. Leider weiß ich nicht, wie das gehen soll, da ich genau mit JS noch nicht wirklich gearbeitet habe.

Ich habe folgende Dateien:
001thumb.png (soll sofort eingebunden werden)
001.png (große Datei, soll wenn sie geladen ist die 001thumb.png ersetzen)

So ähnlich macht das ja z.B. auch facebook wenn man bilder ansieht, wird erst nur der Galerie Thumb gestreckt und getauscht, wenn die Garfik geladen ist.


Ich hoffe, jemand kann mir helfen, wie ich das hinbekomme.

VG und Danke für eure Mühe mit mir

Markus

[DerM]

Und google hilft Dir unter Verwendung deines Titels nicht weiter ??

[MarkusK]

Nein, leider nicht, ich finde nur Lösungen von Preloadern für eine gesamte Seite, aber das ist ja nicht das, was ich will.

[sahnemuh]

https://github.com/mitzerh/jquery_lazyload

http://www.appelsiini.net/projects/lazyload

[DerM]

Er will ja kein Lazy Load sondern ein Preload..

[fyll]

Am besten baust das Bild über JS ein und prüft mit dem bild.onload listener, obs schon da ist und ersetzt dann das "Verpixelte".

[SimonDerDude]

Das erste Suchergebnis bei Google
preload website

Im Prinzip musst du nur ne kleine Funktion in jQuery bauen die auf (document).ready läuft:
('#gross').load(function(){

('#webseite').hide();

('#preloader').fadeOut();

('#webseite').fadeIn();

});

[fyll]

... er will keinen preloader für alle Bilder - wie gesagt.
Es soll ein Bild erst in low-Quali angezeigt werden und sobald das Bild in Originalqualität geladen ist, ersetzt werden.
Also im Grunde für jedes Bild nur ein