Demo mit zwischengespeichertem Zufallsbild

Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.

Hier wird das zwischengespeicherte Bild verzögerungsfrei geladen.

Zurück zum Artikel "Ein Zufallsbild …"

Neues Zufallsbild laden

Die Technik dahinter

1. Der Aufruf des Zufallsbildes von unsplash.com wird in ein externes PHP-Script ausgelagert. Dort wird das Bild nur auf dem Server gespeichert, und nicht angezeigt.
2. Dieses externe PHP-Script wird mittels AJAX aufgerufen. Die Verarbeitung erfolgt damit asynchron, und bremst nicht den Seitenaufbau aus.
3. Bei jedem Aufruf dieser Seite wird mittels PHP zuerst das zuletzt, d.h. beim vorherigen Aufruf, gespeicherte Bild umbenannt, d.h. unter einem anderen Dateinamen gespeichert.
4. Jetzt kann das umbenannte Bild mit einem img-Tag aufgerufen werden.

Klingt kompliziert, letztlich sind aber nur wenige Zeilen Code erforderlich.

1. Das externe Script load_unsplash.php:

   <?php $content = file_get_contents('https://source.unsplash.com/669x471/?office'); file_put_contents('cached_from_unsplash.jpg', $content); ?> In Zwischenablage kopieren In diesem Beispiel wird die Suche auf Bilder mit dem Tag "office" eingegrenzt.

2. Der AJAX-Aufruf:

   <script> var xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET", "load_unsplash.php", true); xmlhttp.send(); </script> In Zwischenablage kopieren Dieser AJAX-Aufruf ist der springende Punkt. Egal, wie lange die Verarbeitung des unsplash-Aufrufs dauert, die Seite mit dem Zufallsbild wird sofort geladen.

3. Bild "umbenennen":

   <?php copy ('cached_from_unsplash.jpg','copied_from_unsplash.jpg'); ?> In Zwischenablage kopieren "Umbenennen ist erforderlich, weil sonst u.U. der src des folgenden img-Tags ungültig wird, und das Bild einfach "verschwindet"."

4. Das img-Tag

   <img src="copied_from_unsplash.jpg?<?php echo time() ?>" alt="Zufallsbild" width="669" height="198"> In Zwischenablage kopieren Der Parameter ?<?php echo time() ?> als Zusatz zur Bildadresse erzeugt etwas wie "copied_from_unsplash.jpg?1625833954", und verhindert, dass das Bild copied_from_unsplash.jpg vom Browser gecached wird, d.h. kein Bildwechsel angezeigt wird.

Download Demo

Mit dem Download anerkennen Sie unsere Allgemeinen Geschäftsbedingungen.

Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.