href download - Afbeelding tijdens het downloaden

Door Onbekende gebruiker op 08-10-2022 18:37

1.124 views

Op mijn website geschreven in PHP bied ik het downloaden van foto's aan met <a href='Foto.jpg' download>. Het werkt, maar soms duurt het iets te lang. Om bezoekers gerust te stellen, wil ik dat er iets wordt weergegeven tijdens het wachten om duidelijk te maken dat de computer nog steeds werkt - bijv. een gif met een zandloper, een draaiende ster of iets dergelijks. Hoe kan ik dit bereiken?

- Ariën -

08-10-2022 23:32

Als je het download-attribuut gebruikt, dan wordt het bestand direct ingeladen en gedownloadt.
Dit gaat via de browser, en dan is het v.z.i.w. niet mogelijk om te zien op je site hoe ver de download is.

Jan Koehoorn

09-10-2022 00:08 gewijzigd op 09-10-2022 00:09

IMHO wil de OP niet laten zien hoe lang de download nog duurt, maar een animated gif laten zien om de bezoeker te laten weten dat er iets gebeurt.

Een begin, niet getest, maar om je een idee te geven:


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>
        Download happening
    </title>
    <style>
    .animation {
        display: none;
    }
    </style>
</head>

<body>

    <div class="animation"></div>

    <a class="download" href="foto1.jpg">Download</a>
    <a class="download" href="foto2.jpg">Download</a>
    <a class="download" href="foto3.jpg">Download</a>

    <script>
    const ANIMATION = document.querySelector('.animation');

    document.addEventListener('DOMContentLoaded', function() {
        const DOWNLOADS = document.querySelectorAll('.download');
        DOWNLOADS.forEach(function(elem, index) {
            elem.addEventListener('click', function() {
                ANIMATION.style.display = 'block';
            });
        });
    });
    </script>
</body>

</html>

[edit]
In mijn voorbeeld zou die div.animation een hoogte en breedte moeten hebben en een animated gif als background img
[/edit]

- Ariën -

10-10-2022 15:43

Dat kan wel, maar is het ook de bedoeling om deze stop te zetten?
Je kan wel een draaiende 'throbber' laten tonen, maar deze wil je ook weer uit kunnen zetten.

Reageren

Inloggen om te reageren