Creating a PDF Preloader in Javascript

Question

I have a website that displays a pdf file embedded in a browser. The code for this is below:

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

Mostly using innerHTML to insert an object tag into a PDF as its data ("bigone" is a table cell). This works fine, but sometimes PDF files are large to load, and the user is faced with a blank screen. I want to insert an image preloader (for example, the text "LOADING ...") while the pdf file is loading in the background.

I am using an Image object in JS but have not been successful.

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>';
}

This does not work, the image appears in front of the bootloader, but is not replaced by an embedded PDF. I placed pdf.onLoad inside the warning and it returned null. Is there something wrong with my code, or with any ideas anyone has to offer? Thank.

Answer 1

You cannot load a PDF file into an image object ... the image object is for images.

What I would do is create a DIV element in HTML, which is a container for the PDF file that will be in the OBJECT element.

, , PDF "" , PDF , , .

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

, , DIV.