Hallo liebes Forum

Ich hab schon mehrfach gegoogelt, aber keine funktionierendes Script gefunden.

Ich habe eine Seite mit mehreren grossen Bildern. Nun möchte ich nicht alle Bilder auf einmal laden, sondern erst dann wenn ich das mit JS (jQuery) auslöse.

Meine Idee: Die Bilder, die am Anfang nicht geladen werden sollen eine CSS-Klasse zu vergeben, damit ich diese mit jQuery ansteuern kann.

Nur was muss ich machen, damit die Bilder nicht geladen werden? Es geht in Richtung lazy load, aber ich habe nicht herausgefunden wie er die Bilder am Anfang nicht laden lässt.

Kann mir da jemand helfen?

Das nachträgliche laden, ist dann kein Problem.

willst du sie nicht laden oder nicht anzeigen lassen?
sonst versteck deine Bilder doch einfach (hide) und lass sie per klick anzeigen(fadein, show)

Nicht laden!

Hm, kann mir niemand helfen?

Oder hab ich einen falschen Ansatz?

Dies sollte doch möglich sein? Das jQuery Plugin Lazy Loader macht ja auch etwas in diese Richtung.

Nach einer Lösung habe ich kürzlich auch gesucht, leider aber nichts gefunden.

Ich habe herausgefunden, dass viele moderne Browser Bilder eben auch dann laden, wenn sie mit display: none; versteckt werden. Damit fällt wohl so ziemlich jede Variante weg, die den Inhalt nicht erst nachträglich lädt.
Wenn du das wirklich brauchst und sicher sein kannst, dass Javascript verfügbar ist, dann lade den Inhalt erst dynamisch nach.

Eine Option ist auch, eine bestimmte Anzahl Bilder zu laden (Eine "Seite"), für Benutzer ohne Javascript dann eine Seitennavigation einbaust und für den Rest die Bilder nach dem Scrollen lädst, so wie es z.B. auf der englischen Google-Bildersuche verwendet wird. Infinite Scroll heißt das ganze.

1 Minute googlen: jQuery UI progressbar

Anstelle des Startbuttons lädst du das ganze bei Seitenaufruf, dass queue ersetzt du durch nen stop und dynamisches laden des Bildes.....

Gruß