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?
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.
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
Je kan wel een draaiende 'throbber' laten tonen, maar deze wil je ook weer uit kunnen zetten.