href download - Anzeige während des Downladens

Diskutiere href download - Anzeige während des Downladens im PHP Forum im Bereich Programmierung; Auf meiner in PHP geschriebenen Website biete ich das Downloaden von Fotos mit <a href='Foto.jpg' download> an. Das funktioniert, aber manchmal...
P

Pilo

Member
Beiträge
13
Punkte Reaktionen
0
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?
 
S

Sempervivum

Well-known member
Beiträge
280
Punkte Reaktionen
43
Leider kenne ich keine Lösung nur mit PHP/HTML/CSS aber mit Javascript und der fetch-API geht es auf jeden Fall:
Code:
    <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/
 
Zuletzt bearbeitet:
Thema:

href download - Anzeige während des Downladens

Oben Unten