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

Tolga Evcimen
  • 7,112
  • 11
  • 58
  • 91
  • 'onload' is not an event for the 'object' tag. Thus, it never gets fired. http://www.w3schools.com/TAGS/tag_object.asp – Adhip Gupta Jul 16 '09 at 15:08

8 Answers8

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" />
d.danailov
  • 9,594
  • 4
  • 51
  • 36
DougB
  • 157
  • 1
  • 2
  • 4
    That doesn't work. Try doing that with a 16MB PDF, the background disappears long before the PDF loads. Here's an example: https://www.docketalarm.com/cases/International_Trade_Commission/337-853/Certain_Wireless_Consumer_Electronics_Devices_and_Components_thereof/520360/8/ – speedplane Feb 06 '14 at 07:28
  • @speedplane This tool https://github.com/kohler/gifsicle can make a looping gif, will this help? – Huang C. Jan 09 '17 at 10:04
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>
user124118
  • 435
  • 1
  • 5
  • 12
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";
Pavel Savara
  • 3,427
  • 1
  • 30
  • 35
  • 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. – rstackhouse Jun 27 '13 at 16:16
  • 1
    What do all the HttpContext dot whatever lines equate to in non .NET speak? – rstackhouse Jun 27 '13 at 16:17
  • Unfortunately, this works only if your cache is big enough. Which is not the case with mobile devices. – Pavel Savara Jul 08 '13 at 09:57
3

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

Michael
  • 311
  • 1
  • 2
  • 9
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

geowa4
  • 40,390
  • 17
  • 88
  • 107
  • 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. –  Jul 16 '09 at 16:04
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();
Matt Bridges
  • 48,277
  • 7
  • 47
  • 61
  • DOMContentLoaded can fire well before the PDF shows up on the screen. – geowa4 Jul 16 '09 at 15:32
  • 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 element in the <embed> as in the original question without getting an exception.</embed> – R4cOOn Aug 07 '09 at 11:42
  • DOM Loaded fires before the PDF is loaded. – James Hughes Sep 03 '09 at 07:10
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!

Rüdiger Hanke
  • 6,215
  • 2
  • 38
  • 45
Amir Shahzad
  • 9
  • 1
0
<embed onload='alert("I should be called")'></embed>
jmjm
  • 159
  • 1
  • 4