Erstellen eines PDF-Preloaders in Javascript

Question

Ich habe eine Website, die eine in den Browser eingebettete PDF-Datei anzeigt. Der Code dafür steht unten:

document.getElementById("bigone").innerHTML = 
'<object type="application/pdf" data="\\PDF\\somefile.pdf" width=100% height="720px"></object>';

Grundsätzlich mit innerHTML, um ein Objekt-Tag mit einem PDF als seine Daten einzufügen ("bigone" ist eine Tabellenzelle). Das funktioniert ganz gut, aber manchmal sind die PDFs groß und brauchen Zeit zum Laden, und der Benutzer wird mit einem leeren Bildschirm konfrontiert. Ich möchte ein Bild Preloader (wie der Text "LOADING...") einfügen, während die PDF-Datei im Hintergrund heruntergeladen wird.

Ich habe das Image-Objekt in JS verwendet, aber keinen Erfolg gehabt.

document.getElementById("bigone").innerHTML = '<img src="gradients\\loading.png" />'
var pdf = new Image();
pdf.src = "\\PDF\\somefile.pdf";
pdf.onLoad = function() {
document.getElementById("bigone").innerHTML = '<object type="application/pdf" data="\\PDF\\somefile.pdf" width=100% height="720px"></object>';
}

Das funktioniert nicht, das Preloader-Bild erscheint, wird aber nicht durch die eingebettete PDF-Datei ersetzt. Ich habe pdf.onLoad in einem Alert platziert und es gibt null zurück. Stimmt etwas mit meinem Code nicht, oder hat jemand eine Idee, was ich tun könnte? Vielen Dank!

Answer 1

Sie können eine PDF-Datei nicht in ein Image-Objekt laden... ein Image-Objekt ist für Bilder gedacht.

Ich würde ein DIV-Element im HTML-Code erstellen, das als Container für die PDF-Datei dient, die sich im OBJECT-Element befinden wird.

Dann könnte ich das Stilattribut "Hintergrundbild" auf das Ladebild setzen, so dass man während des Ladens der PDF-Datei das "Ladebild" im Hintergrund sehen kann, und sobald die PDF-Datei geladen ist, erscheint es über dem Ladebild, so dass man es nicht mehr sehen kann.

<td id="bigone">
    <div id="pdf_container" style="background-image: url('\\gradients\\loading.png'); background-repeat: none; background-position: 50% 50%; height: 720px; width: 100%;">
    </div>
</td>

<script type="text/javascript">
    document.getElementById("pdf_container").innerHTML = '<object type="application/pdf" data="\\PDF\\somefile.pdf" width=100% height="720px"></object>';
</script>

Streichen Sie das, Sie könnten das Hintergrundbild einfach auf die Tabellenzelle anwenden, anstatt das neue DIV-Element ebenfalls zu erstellen.