✔ (Bild-)Daten vorab laden (z.B. Cache)

[Matthias Froese]

Hallo. Ich habe mittels PHP und HTML5(+CSS3) eine Bildergalerie erstellt, mit der es möglich ist, Bilder aus verschiedenen Verzeichnissen (="Galerien") anzusehen. Auch Kommentartexte können dazu angezeigt werden und mittels Javascript konnte ich auch eine Slideshow-Funktion hinzufügen, so dass nach einer einstellbaren Zeit die Bilder weiterschalten. Aber es gibt ein Problem:
Den Bildern kann man beim Laden zuschauen. Sie werden von PHP-Code bereit gestellt, die unter anderem die Funktion "ImageCopyResized" verwendet. Nachdem, was ich gelesen habe, ist da PHP-seitig relativ wenig zu machen.
Jetzt würde ich in dieser Bildergalerie das jeweils nächste Bild gerne "versteckt" vorab laden (also mit Javascript) und beim Aufruf des nächsten Bildes dieses vorab eingeladene Bild ausgeben.
Zwar habe ich die anzuzeigenden Bilder als Hintergrundbilder eines ansonsten leeren DIV-Bereichs eingetragen -was den erfreulichen Effekt hat, dass das Bild erst angezeigt wird, wenn es komplett geladen ist-, aber bis es soweit ist, ist ungefähr eine Sekunde Pause.
Mit reinen HTML-Mitteln klappt es mit dem Cachen leider nicht: Die Bilder werden immer wieder neu vom Server angefordert, weshalb eine Javascript-Lösung her muss.
Jetzt habe ich was von der "Filesystem API" gelesen, könnte die mir weiterhelfen?
Ich stelle mir das so vor, dass ich das nächste Bild im (wie auch immer gearteten) Cache ablege und anschließend aus diesem heraushole. Ich bin mir aber jetzt nicht ganz sicher, ob das mit allen gängigen Browsern funktionieren kann und irgendwo stand etwas davon, dass der Benutzer explizit einem Requester mit der Bitte um Speichererlaubnis zustimmen muss.
Kann mir bitte mal jemand einen Tipp geben, ich sehe momentan vor lauter Bäumen den berühmten Wald nicht mehr.
Vielen Dank im Voraus!

 

[Sempervivum]

Wahrscheinlich ist es viel einfacher: Du kannst die Bilder vorladen, indem Du sie (für den Benutzer unsichtbar) in ein Image-Objekt lädst:

   var theimage = new Image();
   theimage.src = "dein-bild.jpg";

Dann lädt sie der Browser ohne weitere Aktivitäten in seinen Cache und holt sie von dort, wenn das Bild angezeigt werden soll.
https://wiki.selfhtml.org/wiki/JavaScript/DOM/Document/images

Sie werden von PHP-Code bereit gestellt, die unter anderem die Funktion "ImageCopyResized" verwendet. Nachdem, was ich gelesen habe, ist da PHP-seitig relativ wenig zu machen.

Da bin ich mir nicht so sicher: Ein gängiges Verfahren ist, anhand des Änderungsdatums der Bilddateien zu prüfen, ob die originale neuer als die bearbeitete ist. Und nur neu bearbeiten, wenn das der Fall ist. Ebenfalls ein Caching-Verfahren.

 

[Matthias Froese]

Ah, vielen Dank! Ich glaube, das hilft mir tatsächlich weiter. Das werde ich direkt mal ausprobieren. Danke für den Tipp, irgendwo war ich im Netz schon auf Beschreibungen über Image-Objekte gestoßen, dachte aber nicht, dass das bei meinem Problem weiterhilft. Wie so oft habe ich wieder einmal zu kompliziert gedacht.