Sanduhr anzeigen bis PDF geladen ist

solala123

solala123

Erfahrenes Mitglied
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
 
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)
 
Zuletzt bearbeitet:
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
 
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
 
Zuletzt bearbeitet:
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.

Link zur Lösung
 
Zuletzt bearbeitet:
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
 
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.
Zum Vergrößern anklicken....
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.

Link zur Lösung


Wenn du nur die Sanduhr haben willst , würde in meinen Fall der Code reichen
HTML: 
<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.
 
Zuletzt bearbeitet:
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:

sanduhr.JPG
was muss ich in Zeile 213 bei data= "" eingebn?
in Zeile 222 habe ich mein PDF eingetragen und wo hast du die Sanduhr her?
 
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
 
Was sagt die Fehlerkonsole den?
Das Data Attribute kann da erstmal weg , das hat keinen Sinn.
Das src Attribute bitte leer lassen.
Dann steht im Netz ü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.
Zum Vergrößern anklicken....

Du könntest auch iFrame benutzen, der Code geht bei beiden Elemente.
Deinen Fehler kann ich nach nachstellen.
Bei mir geht es so
*** Link entfernt weil gibt es nicht mehr **

Mach doch mal Copy Paste aus dem Quelltext und versuche es mal so.
Welchen Browser nutzt du denn?
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück