Wie Ladeanimation mit Download.php verbinden?

3 Antworten

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 ;)

Woher ich das weiß:Berufserfahrung

Ja, dass es mehr CSS ist weiß ich... habe auch schon einen.

0
@Jaronmechner

Nein, hat auch mit CSS wenig zu tun. Ob der DOM komplett geladen ist prüft man mit JavaScript. Alles andere ist Beiwerk.

0
@threadi

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?

0
@Jaronmechner

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.

0
@threadi

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

0
@Jaronmechner

Ich verstehe dich weiterhin nicht. So kann man dir nicht helfen.

0
@threadi

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

0
@Jaronmechner
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.

0
@regex9

das klingt sehr kompliziert.. O.O

kannst du das erklären

0
@regex9

...wie man ajax dazu zwingt die datei zu schicken mit all den headern wie filesize, content-type usw

0
@Jaronmechner

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"');
0

Also du lädst eine html-Datei, währenddessen läuft eine Animation und danach öffnest du ne php-Datei?

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

0
@Phil13272

Ne da steht sowas wie warte auf download und irgendwas bewegt sich punkte oder sowas

0
@Phil13272

da stehen einige header wie filesize usw drin sonst steht da als restzeit unbekannt..

0
@Phil13272

... die Animation soll wohl so lange angezeigt werden, wie der content lädt. ( denke ich mal )

0
@MrStef

Der Content der Seite, auf der der Download-Button ist.

0

Was möchtest Du wissen?