CODEWITHSUNDEEP
javascriptpdfpreloader
NavMan
NavMan

Reputation: 355

Creating a PDF preloader in Javascript

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

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

Basically using innerHTML to insert an object tag with a PDF as its data ("bigone" is a table cell). This works perfectly fine, but sometimes the PDF's are large at take time to load, and the user is faced with a blank screen. I want to insert an image preloader (like the text "LOADING...") while the pdf file downloads in the background.

I've using the Image object in JS but have had no success.

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 doesn't work, the preloader image appears, but isn't replaced with the embedded PDF. I placed pdf.onLoad inside an alert and it returned null. Is there anything wrong with my code, or any ideas anyone has to offer? Thanks.

Upvotes: 3

Views: 5331

Answers (1)

Jon
Jon

Reputation: 12992

You can't load a PDF file into an Image object... an Image object is for images.

What I'd do is create a DIV element in the HTML that is a container for the PDF file that's going to be in the OBJECT element.

Then I could set the background-image style attribute to be that loading picture so that whilst the PDF is loading people can see the "loading" image in the background, and once the PDF has loaded it will appear on top of the loading image so people can't see that any more.

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

Scrap that, you could just apply that background-image to the table cell instead of having to make the new DIV element too.

Upvotes: 5

Related Questions