href download - Afbeelding tijdens het downloaden

Overzicht

Sponsored by: Vacatures door Monsterboard

Jan Rahmelow

Jan Rahmelow

08/10/2022 18:37:27
Anchor link
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?
 
PHP hulp

PHP hulp

01/02/2023 09:41:27
 
- Ariën  -
Beheerder

- Ariën -

08/10/2022 23:32:33
Anchor link
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

Jan Koehoorn

09/10/2022 00:08:34
Anchor link
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:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!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
Gewijzigd op 09/10/2022 00:09:45 door Jan Koehoorn
 
- Ariën  -
Beheerder

- Ariën -

10/10/2022 15:43:36
Anchor link
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.
 
 

Dit topic is gesloten.



Overzicht

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.