Thumbnails erzeugen

  • Thumbnails erzeugen

    Ich schreibs mal hier rein, weil ich nicht genau weis wie ob ich das ganze mit HTML, CSS, JS oder sonst irgendwas lösen kann.
    Okay, folgendes Problem:
    Ich hab einen Ordner, mit beliebig vielem Bildern (atm ~400, alle zwischen 1,5 - 2 MB und ca. 1800 x 5000 Pixel groß), diese möchte ich _ALLE_ auf einer Seite darstellen lassen (per html, css und js). Soweit so gut, funktioniert auch alles. Ich lasse sie als 170x150 große Thumbnails anzeigen. Problem ist nur, ich habe keine Möglichkeit lokal PHP zu nutzen, um mir tatsächliche Thumbnails mit der Größe zu erzeugen. Alles was ich nutzen kann ist HTML, CSS, Javascript und Nodejs. Das heisst alles was ich tun kann ist die Bilder durch CSS zu skalieren und somit habe ich natürlich trotzdem eine enorme Ladezeit aufgrund der Größe der Bilder. Nun brauche ich eine Lösung, um die Ladezeit möglichst gering zu halten, weil dadurch mein Browser ~ 2GB an Ram zieht beim laden, und trotzdem für eine Minute hängt bis er nur die sichtbaren Bilder geladen hat. Mir fielen da spontan zwei Wege ein, wie ich das lösen könnte:
    1. Die Bilder per JS durch ein Canvas ersetzen, auf welches ich die Bilder in Thumbnail Größe Projiziere. Problem dabei ist nur, das die Bilder dafür trotzdem geladen werden müssen. Heisst also, dass das mein "Ladezeit-Problem" nicht löst.
    2. Die Bilder per JS nacheinander laden lassen. Das würde zwar vermeiden, das der Browser überlastet, allerdings würde es trotzdem zu lange dauern bis die Bilder alle sichtbar wären.


    Hat hier vllt jemand einen genialen einfall? Ich bin für jede Idee dankbar :)

    Frohes Fest!

    //Edit: close, ich bin doof :|