28

I'm embedding a PDF in a web page with the following html :-

<object id="pdf" classid="clsid:CA8A9780-280D-11CF-A24D-444553540000" width="1024" height="600"> <param name="SRC" value="/GetDoc.ashx?SOID=<%=Html.Encode(Model.OrderID)%>" /> <embed src="/GetDoc.ashx?SOID=<%=Html.Encode(Model.OrderID)%>" width="1024" height="600"> <noembed> Your browser does not support embedded PDF files. </noembed> </embed> </object>

The PDF's can be a little slow to load so I'd like to hide the object and display a loading message / gif until it's fully loaded so the user isn't looking at a blank screen.

All I really need is a way of telling when the object is fully loaded. I've tried the 'onload' event of the but it never seems to get fired.

I'm beginning to think it might not be possible, but it never hurts to ask...

Improve this question
1

8 Answers 8

Reset to default
14

I don't know why everyone makes it so hard.

<object data="yourfile.pdf" style="background: transparent url(AnimatedLoading.gif) no-repeat center;" type="application/pdf" />
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

That doesn't work. Try doing that with a 16MB PDF, the background disappears long before the PDF loads. Here's an example: docketalarm.com/cases/International_Trade_Commission/337-853/…
@speedplane This tool github.com/kohler/gifsicle can make a looping gif, will this help?
10

Following code works.

<div style="background: transparent url(loading.gif) no-repeat"> <object height="1250px" width="100%" type="application/pdf" data="aaa.pdf"> <param value="aaa.pdf" name="src"/> <param value="transparent" name="wmode"/> </object> </div>
Improve this answer

Comments

7

I'm loading the PDF with jQuery ajax into browser cache. Then I create embedded element with data already in browser cache.

 var url = "http://example.com/my.pdf"; // show spinner $.mobile.showPageLoadingMsg('b', note, false); $.ajax({ url: url, cache: true, mimeType: 'application/pdf', success: function () { // display cached data $(scroller).append('<embed type="application/pdf" src="' + url + '" />'); // hide spinner $.mobile.hidePageLoadingMsg(); } });

You have to set your http headers correctly as well.

 HttpContext.Response.Expires = 1; HttpContext.Response.Cache.SetNoServerCaching(); HttpContext.Response.Cache.SetAllowResponseInBrowserHistory(false); HttpContext.Response.CacheControl = "Private";
Improve this answer

3 Comments

do you know if this works with Chrome? I'm setting the expires and cache control headers and the file shows up in chrome://cache. For some reason, in the network tab, it shows the file being fetched again. There are only two things that I can think of. 1) the url fragment for the pdf options for the embeded one is stumping chrome's caching logic or 2)The cache doesn't have enough time between fetches to cache the file.
What do all the HttpContext dot whatever lines equate to in non .NET speak?
Unfortunately, this works only if your cache is big enough. Which is not the case with mobile devices.
3

None of the recommendations are valid, because DOM is loaded before the PDF content is loaded. So DOM can't control ActiveX content

Improve this answer

Comments

0

"Content within a tag is displayed when an object is loading, but hasn't yet finished."

So put your spinner in there and it should work out nicely for you. And you won't have to write any JavaScript.

src: http://en.wikibooks.org/wiki/XHTML/XHTML_Objects

Improve this answer

1 Comment

I think the trouble is the activex object has loaded well before the pdf file is finally displayed. So I think content within the tag would only be displayed for a fraction of a second before the activex component takes over.
0

You are going to want something like jQuery's document.ready() function. For non-IE browsers, you can register a handler for the event DOMContentLoaded, and your handler function will be called after all the images and objects have been loaded. For IE, you have to continually check the document.readyState property, and wait for it to be "complete".

If you are using jQuery, they've done the hard work for you, so all you have to do is:

$(document).ready(function() { //take away the "loading" message here });

If you don't want to use jquery, you'd have to do something like:

addEventListener('DOMContentLoaded', function() { //take away the "loading" message here }); function waitForIE() { if (!document.all) return; if (document.readyState == "complete") { //take away the "loading" message here } else { setTimeout(waitForIE, 10); } } waitForIE();
Improve this answer

3 Comments

DOMContentLoaded can fire well before the PDF shows up on the screen.
Did anyone use that approach? From the comments it looks like it's not working properly. I'm trying to display PDF on an ASP page from Silverlight and I can't set the <noembed> element in the <embed> as in the original question without getting an exception.
DOM Loaded fires before the PDF is loaded.
0 
$(document).ready(function() { });

would not work as this fires mostly on document.readyState == interactive rather than on document.readyState == complete.

If you put a timer with this check (document.readyState == "complete") it would definitely work!

Improve this answer

Comments

0 
<embed onload='alert("I should be called")'></embed>
Improve this answer

2 Comments

In the question, the asker says that they "tried the onload event but it never seems to get fired".
yep, this event is not fired in Chrome