JQuery ajax for pdf loading in object tag

Question

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

can someone suggest a way to do this using jquery ajax

Answer 1

You could display a placeholder div and hide the PDF object until it has fully loaded. I am not sure if the load event works, however, I have never used it:

<div id="pdf-placeholder" style="width: 1024px; height: 600px;">
    <!-- whatever you want here -->
</div>
<object id="pdf" style="display: none;" ...>
   ...
</object>

// JS code
$(window).load( function() {
    $('#pdf-placeholder').hide();
    $('#pdf').show();
});

Answer 2

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>

Answer 3

The second one does work, but in case of big pdf, it only shows for a second and then start poppulating the pdf, is there a way to keep it until the hole download is complete and then show the pdf?