# Sanduhr anzeigen bis PDF geladen ist



## solala123 (24. Oktober 2021)

Hallo,
ich habe folgendes Problem:

Ich will auf meiner Homepage ein PDF laden, das allerdings sehr groß ist und deshalb die Seite, wo das PDF geladen wird für ca. 10 bis 15 sec. leer bleibt.
In dieser Ladezeit möchte ich eine Sanduhr, Hinweis oder irgendwas anzeigen, das darauf hinweist, dass geladen wird.

Ich habe keinen blassen Schimmer, wie ich das machen könnte, ich hab mir die beiden Beiträge hier schon angesehen, halfen mir aber nicht weiter, auch der Google konnte mir nicht helfen.

Jetzt hoffe ich auf Euch 

Grüße und schon mal Danke
Rainer


----------



## basti1012 (24. Oktober 2021)

Beim Öffnen der Seite , oder des PDF Dokument blendest du die Sanduhr ein (z. B.  display:block ).
Mit Javascript event onload überwachst du das vollständige geladen Dokument.
Das Event Feuer erst, wenn das Dokument da ist  und dann kannst du die Uhr wieder ausblenden.
Eigentlich ganz einfach.

EDIT:
Muss mich verbessern.
Wie zeigst du die PDF-Datei an?
embed, Objekt,iFrame oder lädst du es mit JQuery in ein Element?
Das onload funktioniert bei großen Dateien irgendwie nicht richtig bei mir( zumindest in iFrame und embed)


----------



## solala123 (24. Oktober 2021)

Hallo,
erstmal Danke für die Antwort,
leider habe ich von Javascript so gut wie keine Ahnung, 
ich schau mal, ob ich was finde über event onload, ob ich es selber irgendwie hinbekomme, etwas Ehrgeiz hab ich ja auch,
ich werde mich nochmals melden, wenn es nicht klappt,

ich zeige das PDF mit embed an


----------



## basti1012 (25. Oktober 2021)

Wie gesagt, mit dem load Event hat das bei mir nicht geklappt.
Habe eine 20 MB PDF Datei genommen. Das load hat schon nach eine Sekunde gefeuert , obwohl das PDF noch lange nicht da war.

Vielleicht haben die anderen da eine Idee.

Ich habe  jetzt zwar eine Lösung gefunden die auch bei der 20 MB PDF Datei funktioniert5, ist aber nicht der übliche Weg.
Man könnte dann auch noch ein Ladebalken oder Timer  einbauen wie lange das laden noch genau dauert , finde ich besser als eine Sanduhr die auf unbestimmte Zeit sich dreht oder sonst was.

Aber erstmal warten, was die anderen noch für Ideen haben


----------



## basti1012 (26. Oktober 2021)

Da keine Ideen gekommen sind, zeige ich dir meine Lösung:
Das PDF ist 20 MB groß, damit man den Effekt auch besser sehen kann.
Der Transfer Timer könnte man auch noch umbauen als Ladebalken  mit Timer der auf null runterzählt.
So wie die Browser immer die Restzeit bis zum fertigen Download, runter z#hlt

Du kannst aber auch jeden anderen loader einbauen , das musst du wissen.
https://basti1012.bplaced.net/testodner_forums/tutorials/sanduhr_anzeigen_bis_pdf_geladen_ist.php


----------



## solala123 (26. Oktober 2021)

Hallo Basti,
ja, das sieht doch klasse aus, ob es nur eine Sanduhr, ein Balken, ein Text, was auch immer ist, würde passen.
Da du das alles sicherlich in Javascript geschrieben hast, bin ich bei diesem vermutlich großen Projekt raus, ich hab ja so gut wie keine Ahnung von Javascript, ich hatte mir vorgestellt, dass es was Einfaches, vielleicht sogar was Fertiges gibt, dass ich nur an meine Gegebenheiten anpassen muss.
Ich werde mal, wenn ich wieder etwas mehr Zeit habe daran basteln, vielen Dank für deine Hilfe und deine Anstöße, melde mich wieder zu gegebener Zeit
nochmals Danke
Gruß
Rainer


----------



## basti1012 (26. Oktober 2021)

solala123 hat gesagt.:


> Da du das alles sicherlich in Javascript geschrieben hast, bin ich bei diesem vermutlich großen Projekt raus, ich hab ja so gut wie keine Ahnung von Javascript, ich hatte mir vorgestellt, dass es was Einfaches, vielleicht sogar was Fertiges gibt, dass ich nur an meine Gegebenheiten anpassen muss.


Das ist nur Javascript , das stimmt .
Großes Projekt ist es eigentlich auch nicht.
Ich habe jetzt nochmal alles herausgeworfen, was man nicht braucht .
Ich hatte im ersten Beispiel zu viel Ballerst und auskommentierte versuche , die haben das wohl größer aus sehenlassen wie es ist.
Habe dafür aber eine Restzeit anzeige , Ladebalken  und  Downloadgeschwindigkeit mit eingebaut.
https://basti1012.bplaced.net/testodner_forums/tutorials/sanduhr_mit_timer.php
-

Wenn du nur die Sanduhr haben willst , würde in meinen Fall der Code reichen

```
<body>
<div id="clock" class="clockWrap">
Sanduhr
</div>

<embed id="pdf" width="90%" height="100"  data="" type="application/pdf" src=""></embed>
<script>
var uhr=document.getElementById('clock');// element was ausgeblendet werdenb soll
var pd=document.getElementById('pdf');
let xhr = new XMLHttpRequest();
xhr.open ( "GET",  "A17_FlightPlan.pdf", true );
xhr.responseType = 'arraybuffer';
xhr.onreadystatechange = function (){
    if (xhr.readyState == 4 && xhr.status == 200) {
          var blobSrc = window.URL.createObjectURL(new Blob([this.response], { type: 'application/pdf' }));
          pd.src=blobSrc;
          uhr.style.display='none';
    }
}
xhr.send ();
</script>
</body>
```

Ob es einfacher geht , oder warum ein einfacher onload nicht funktioniert, weiß ich auch nicht.
Es hat sich ja kein anderer mehr dazu gemeldet  ,deswegen denke ich mal das es da wohl nicht viel einfachere Möglichkeiten vorhanden sind.


----------



## solala123 (27. Oktober 2021)

hallo Basti,
erstmals, vielen Dank für deine Bemühungen

ich habe mal versucht deinen Code bei mir zu testen, leider funktioniert er nicht, vermutlich habe ich was vergessen oder falsch gemacht.

wenn ich deinen Code so kopiere, zeigt mir mein Programm einen Fehler an.
so schaut das Programm aus, wie ich es eingegeben habe:



was muss ich in Zeile 213 bei data= "" eingebn? 
in Zeile 222 habe ich mein PDF eingetragen und wo hast du die Sanduhr her?


----------



## basti1012 (27. Oktober 2021)

Lass bei den embed das src="" Attributte mal leer.
Was schreibt die Konsole den ?
Ich verstehe gerade so nicht warum die rot gekennzeichnet ist.

Die Uhr habe ich bei Codepen gefunden


----------



## basti1012 (27. Oktober 2021)

Was sagt die Fehlerkonsole den ?
Das data Attribute kann da erstmal weg ,  das hat kein sinn.
Das src Attributte bitte leer lassen.
Dann steht im Netzt über das embed  Element das


> Beachten Sie, dass die meisten modernen Browser die Unterstützung für Browser-Plug-Ins eingestellt und entfernt haben. Daher <embed>ist es im Allgemeinen nicht ratsam, sich darauf zu verlassen, wenn Sie möchten, dass Ihre Website im Browser des durchschnittlichen Benutzers betriebsbereit ist.



Du könntest auch Iframe benutzen, der Code geht bei beiden Elemente.
Deinen Fehler kann ich nach Nachstellen.
Bei mir geht es so
https://basti1012.bplaced.net/testodner_forums/tutorials/test.php

Mach doch mal Copy Paste aus den Quelltext und versuche es mal so.
Welchen Browser nutzt du den ?


----------



## solala123 (27. Oktober 2021)

Hallo,
ich teste es immer mit 4 verschiedenen Browsern, FF, Opera, Google, Edge
warum ich embed benütze ist, weil der Firefox  iframe zum Anzeigen von PDF nicht mehr unterstützt,
das habe ich bei meiner alten Homepage bemerkt, weil kein PDF mehr angezeigt wurde, danach habe ich gegoogelt und eben herausgefunden, dass FF den iframe in Verbindung mit PDF nicht mehr unterstützt

es steht nur da, dass es ein Syntaxfehler ist, es könnte ja auch sein, weil ich Dreamweaver6 noch benütze, dass er den Befehl let noch nicht kennt?

ich habe alles nochmals kopiert und eingefügt, aber es wird nur "Sanduhr" angezeigt, ist ja ok 

Seite wo die Sanduhr angezeigt werden soll


----------



## basti1012 (27. Oktober 2021)

Hast du mal geschaut was die Konsole alles an Fehler raushaut ?
Binde da mal deine Datei ein , weil du da noch meine flight PDF drinn stehen hast


----------



## solala123 (28. Oktober 2021)

Hallo Basti,
ich habe eine einfache Lösung auf YouTube gefunden,
einfache Beschreibung für "Sanduhr"

die habe ich mal gemacht und funktioniert,

Aber, es geht noch viel einfacher:
<object  width="100%" height="600" type="application/pdf" data="archiv/zeitungsberichte/1971-1980.pdf"></object>

Wenn jetzt die Seite aufgerufen wird, läuft automatisch ein Balken, bis das große PDF geladen ist 
Habe es mit allen 4 Browsern getestet

Nochmals vielen herzlichen Dank für deine Unterstützung
Gruß
Rainer


----------



## basti1012 (28. Oktober 2021)

Der lädt die datein aber nicht vor.
Das ist ein ganz einfaches load Event.
Das ist doch das, was du nicht wolltest.
Mach es mal mit deaktivierter Cache , dann siehst du das der Ladebalken in PDF dokument wieder da ist .

Die Animation verschwindet, wenn der Dom geladen ist , aber du wolltest doch das der so lange bleibt bis das Dokument komplett da ist.
Das funktioniert mit dem load Event nicht.

Wie gesagt mach mal Konsole auf , deaktiviere der Cache, und du siehst das du wieder bei #1 angekommen bist.

Wenn dir das trotzdem reicht so , dann ist ja ok , dann wäre Lösung #2 schon das richtige gewesen , das macht das Gleiche.
Man hätte da nur noch etwas CSS zu gebraucht für den Animierten loader


----------



## solala123 (29. Oktober 2021)

Hallo Basti,
es war ja ganz am Anfang so, dass die Seite aufgerufen wurde und der Rahmen, wo das PDF angezeigt werden soll leer blieb, bis es geladen wurde, deshalb wollte ich ja die Sanduhr oder Ähnliches.
Jetzt läuft ein Balken und das ist ok so.

Aber, wenn ich etwas mehr Zeit habe, werde ich deinen Vorschlag nochmals testen, wenn er bei dir funktioniert, sollte es ja auch bei mir gehen.

Vielen Dank für deine Unterstützung und Geduld mit mir 

Gruß
Rainer


----------



## Jan-Frederik Stieler (2. November 2021)

Um PDFs zu verarbeiten bietet sich auch das hier immer gut an:
PDF.js


----------

