href download - Afbeelding tijdens het downloaden
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?
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.
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.
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:
Een begin, niet getest, maar om je een idee te geven:
Code (php)
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
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>
<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
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
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.
Je kan wel een draaiende 'throbber' laten tonen, maar deze wil je ook weer uit kunnen zetten.



