Wie Ladeanimation mit Download.php verbinden?
Hallo,
ich will für meine geile Website eine Ladeanimation einbauen.
Wie muss ich die html konfigurieren, damit sie die PHP erst nach vollständigem Ladem der Datei ausführt? Geht das? Weil die Ladeanimation soll natürlich zu sehen sein bevor der Download abgeschlossen wurde.
LG
3 Antworten
Also du lädst eine html-Datei, währenddessen läuft eine Animation und danach öffnest du ne php-Datei?
Und die Ladeanimation zeigt den Download-Fortschritt an?
Ne da steht sowas wie warte auf download und irgendwas bewegt sich punkte oder sowas
da stehen einige header wie filesize usw drin sonst steht da als restzeit unbekannt..
Und warum soll es erst nach dem Download ausgeführt werden?
... die Animation soll wohl so lange angezeigt werden, wie der content lädt. ( denke ich mal )
Was du tun musst ist in deinem HTML zuerst ein JavaScript ausführen dass die Ladeanimation durchführt und erst am Ende der HTML-Datei den Content lädt. So ist der Code für die Ladeanimation direkt verfügbar und die zeitlich aufwändigen Sachen kommen zum Schluss
Hier gibts einige zur Auswahl:
https://t3n.de/news/inspiration-css-ladebalken-480481/
Mit HTML alleine hat das aber wenig zu tun ;)
Ja, dass es mehr CSS ist weiß ich... habe auch schon einen.
Nein, hat auch mit CSS wenig zu tun. Ob der DOM komplett geladen ist prüft man mit JavaScript. Alles andere ist Beiwerk.
ach um die funktionsweise geht es gerade nicht...
meine download datei die die datei runterlädt ist eine .php!
Ich will dass erst die Seite aufgebaut wird und dann die php geladen. aaaah muss ich dann die php an das ende der html datei anfügen?
Ich verstehe das nicht ganz. Du rufst um den Download zu starten eine PHP-Datei auf, also z.B. download.php?file=datei.pdf - und dann soll datei.pdf zum Download angeboten werden? Dann hast Du in download.php lediglich den falschen oder gar keinen Content-type für den Download gesetzt.
Falls es das nicht ist müsste man den von dir eingesetzten Quellcode und evtl. auch einen Link zur Seite sehen um dir hierbei helfen zu können.
hä du rufst die downloadseite auf
klickst auf download
die seite öffnet eine andere datei wo steht "Warte auf download" oder was man halt will und währenddessen lädt er die datei
php habe ich wegen header filesize und so
Ich verstehe dich weiterhin nicht. So kann man dir nicht helfen.
kennst du nicht diese warteanimationen nachdem du auf download geklickt hast?
ich will diese animation abspielen währenddessen er die datei runterlädt
php ist ja auf dem server er soll erst die html aufbauen und die animation anzeigen
aaaah muss ich dann die php an das ende der html datei anfügen?
Das ändert nichts am Ladeverhalten des Codes. PHP wird auf dem Server interpretiert, also bereits bevor das HTML-Dokument im Browser aufgebaut wird.
Leite einfach auf eine Seite weiter, auf der von Beginn an die Ladeanimation abgespielt wird. Im Hintergrund kannst du derweil einen AJAX Request an den Server senden, der dazu auffordert doch bitte einmal die Datei rüberzuschicken. Falls der Vorgang zu schnell abläuft, kannst du den Request via JS künstlich verzögern.
...wie man ajax dazu zwingt die datei zu schicken mit all den headern wie filesize, content-type usw
Achso. Füge zuerst einen Link zu deinem Markup, welchem du eine ID gibst (z.B. download). Dann verschickst du zunächst den einfachen Request:
var request = new XMLHttpRequest();
request.open("GET", "YOUR DOWNLOAD URL", true);
request.responseType = "blob";
request.send();
Zusätzlich (am besten noch vor dem Senden) definierst du das onload-Event:
request.onload = function (evt) {
if (request.status !== 200) {
console.error("Request failed!");
return;
}
let blob = request.response;
let contentType = request.getResponseHeader("content-type");
let filename = getFilename(request, contentType);
if (window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(new Blob([blob], { type: contentType }), filename);
} else {
let downloadLink = document.getElementById("download");
downloadLink.setAttribute("href", window.URL.createObjectURL(blob));
downloadLink.setAttribute("download", filename);
downloadLink.click();
}
};
function getFilename(request, contentType) {
// IE handling (in case, header is missing)
if (request.getResponseHeader("content-disposition")) {
let contentDisposition = request.getResponseHeader("content-disposition");
return contentDisposition.substring(contentDisposition.indexOf("=") + 1);
}
return "unnamed." + contentType.substring(contentType.indexOf("/") + 1);
}
Auf Serverseite müsstest du einen Response Header wie diesen setzen:
// PHP example
header('Content-Disposition: attachment; filename="YOUR FILENAME"');
Nein. Ich meine die bekannte Ladeanimationen.
Du klickst auf Download,
die Seite wechselt auf eine andere Datei, wo steht bla bla Download wird vorbereitet/bereitgestellt o.Ä.
Auf der Website befindet sich eine Ladeanimation und währenddessen lädt er die Datei herunter