href download - Afbeelding tijdens het downloaden
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.
Dit topic is gesloten.