Avatar of Rowdyone52
Rowdyone52
 asked on

Loading image for embedded PDF

I am trying to embed a PDF in an html page. The problem is it takes a few moments to load and we need a loading image to display until it is complete. I can't find a cross browser solution. Chrome handles the iframe with an onload event which hides the loading image and displays the iframe, but FF doesn't fire the onload event. IE doesn't show the PDF inline if it's in an iframe but opens it in the default application. The object tag doesn't have an onload event in Chrome or IE and if I try downloading the pdf asynchronously there is no way to pass the data to the object since it's source has to be a url. The same problem exists for the embed tag. This seems like it should be a lot easier, but any advice would be welcomed.
Scripting LanguagesHTML

Avatar of undefined
Last Comment
Michel Plungjan

8/22/2022 - Mon
Michel Plungjan

1) chrome has native handling of PDF so that makes it the odd one out
2) ie normally prefers iframe over object which works in fx.
You could wrap the PDF in an HTML  document of it's own which will trigger the iframe onload it is in.
Kim Walker

What if the loading image were the background image for the iframe? It would be covered by the PDF when it loads. No onload event would be required then.
Rowdyone52

ASKER

1) chrome has native handling of PDF so that makes it the odd one out
I need the PDF embedded in an html based page because other controls are needed on the page. So if I'm understanding you right, the native handling of a PDF file doesn't help me in this case.


2) ie normally prefers iframe over object which works in fx.
You could wrap the PDF in an HTML  document of it's own which will trigger the iframe onload it is in.
In IE the iframe doesn't display inline but opens in the default PDF application. Since I have controls on the page, it is important that the PDF be shown inline. Loading the PDF in an html document inside the iframe will not work because the document onload event fires after the document is loaded but well before the PDF is loaded and rendered. It would essentially be the same issue just buried one level deeper.


What if the loading image were the background image for the iframe? It would be covered by the PDF when it loads. No onload event would be required then.
This doesn't work for the iframe because the PDF doesn't open inline for IE. I tried the same idea with the object tag, and the problem is that Chrome (and I think but it's been a day or two also IE) render the object with a solid background which hides the loading image. I've tried using CSS to set the background to transparent and adding the following param to the object element
 <param name="wmode" value="transparent"> </param> 

Open in new window

but neither worked for me -- I still could not see the loading image.

I appreciate the suggestions, though. Let me know if I didn't understand you correctly or if it looks like I'm doing something wrong. Or if you just have another idea. :)
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
ASKER CERTIFIED SOLUTION
Michel Plungjan

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question