href download - Anzeige während des Downladens

[Pilo]

Auf meiner in PHP geschriebenen Website biete ich das Downloaden von Fotos mit <a href='Foto.jpg' download> an. Das funktioniert, aber manchmal dauert es doch etwas zu lange. Zur Beruhigung der Besucher hätte ich gern, daß während des Wartens etwas angezeigt wird, was deutlich macht, daß der Computer noch arbeitet - zB. ein Gif mit Sanduhr, einem drehenden Stern oder dergleichen. Wie kann ich das erreichen?

 

[Sempervivum]

Leider kenne ich keine Lösung nur mit PHP/HTML/CSS aber mit Javascript und der fetch-API geht es auf jeden Fall:

    <button class="download-btn" data-imgurl="images/dia0.jpg">Bild 1 herunter laden</button>
    <button class="download-btn" data-imgurl="images/dia1.jpg">Bild 2 herunter laden</button>
    <button class="download-btn" data-imgurl="images/dia2.jpg">Bild 3 herunter laden</button>
    <!-- Das Bild, das die Aktivität anzeigt,
    kann auch eine Animation mit CSS o. ä. sein -->
    <img id="busy-img" src="images/star3.png">
    <script src="js/FileSaver.js"></script>
    <script>
        const theBusyImg = document.getElementById('busy-img');
        function downloadIt(event) {
            // Das Bild, das die Aktivität anzeigt, sichtbar machen:
            theBusyImg.style.display = 'inline';
            // URL des Bides aus dem data-Attribut bereit stellen
            imgUrl = event.target.dataset['imgurl'];
            // Die aktuelle Datei mit fetch herunter laden:
            fetch(imgUrl).then(response => {
                if (!response.ok) {
                    throw Error(response.statusText);
                }
                return response.blob();
            }).then(blob => {
                // Der Parameter blob enthält die herunter geladene Datei.
                // Wir speichern sie im lokalen Dateisystem:
                saveAs(blob, imgUrl, {});
                theBusyImg.style.display = 'none';
            }).catch(function (error) {
                console.log(error);
            });
        }
        window.addEventListener('click', event => {
            if (event.target.classList.contains('download-btn')) {
                downloadIt(event);
            }
        });
    </script>

Die Funktion saveAs wird durch dieses Skript bereit gestellt:
https://github.com/eligrey/FileSaver.js/