Man I don't like PDF's

So here's a general overview of my problem. Maybe some one can help me brainstorm a solution.

I have a website, which embeds a pdf document into a page, and displays it to a user. The document is not the only thing on the page. There is no way around embedding the document into the page (can't say click here to view, or ask user to download). I wish there was, but the employer won't have it.

The problem is, some of these documents are larger(ish). 5+ mb. And they can take a long time to load.
Currently what happens while they're loading is nothing, nothing at all. The section where adobe reader is embedded turns white and doesn't display anything until the entire pdf is loaded.
This is bad because the user thinks something is broken, when in reality, it's just loading.
So I need something, anything, that will help the user understand that the pdf is loading, and to just be patient.
This is where I need ideas.

Here's somethings I've thought of, a few I've tried but maybe did wrong (I love php, hate hate hate javascript):

1. Tried-Have the pdf embedded in a hidden div. Have a loading spinner showing in a different div. Once the page is loaded (I tried it using some DOM stuff) the pdf div shows, and the loading div hides. When I tried this, the page would think it was loaded right away, so the loading div would hide and the pdf div would show. After a lot of messing about I thought that maybe the page thinks it's loaded right when it calls the embedded adobe reader, and doesn't care about the document it's self.
I would love to have a way to make this one work, but I'm not sure it can

2)Tried- Lightbox-esqe pop-up message which comes up on the page load and just says "Hey, we're loading something for you. Could you hold on a bit? But close this box when ever you like". I tried a few different version, some using mootools, jquery, some that did it with .css. I (maybe because I'm bad at js) couldn't get any to work.
And besides, this has an inherit flaw. Since I don't know when the pdf is finally loaded, I can't close the box automatically. I have to let the user close it. And they may close it before the pdf is done loading, or wait around for it to close it's self.

3)Tried- Put a loading spinner in a div, give it an absolute position. Put the embedded pdf in a div, give it an absolute position that lays on top of the loading div. While the pdf is loading, since nothing is in it's spot yet, you see the loading spinner. Once it's done loading, it just covers the spinner with the pdf document.
Doesn't work. the pdf takes up the space it needs for the document and either makes it all white or all black. You never see the spinner.


So I'm stuck. I don't know what to do at this point. I would love to be able to have my page say "Hold on a tick, we're loading" and then remove the message when it's actually done loading, but I can't figure it out. So any suggestions are welcome, and I'm willing to try anything at this point.

Thanks for the help

How do you load the pdf?
Is it in any kind of frame, or just embedded within the document?


you could always try an 'onload' on the embed object that shows it when it's done... thus:



<object style="display: none" onload="this.style.display = 'block'">



or even call a function like thus:

HTML:


<object style="display: none" onload="stopWaiting(this)">



JS:


function stopWaiting(elm)
{
elm.style.display = "block"; //shows the pdf

document.getElementById('waitingDIV').style.display = "none"; //hides the 'please wait'
}


..any use?

Currently the pdf is being displayed using

<EMBED src="./data/fs1/Test.pdf" width="1200" height="800" PLUGINSPAGE="http://www.adobe.com/products/acrobat/readstep2.html"></EMBED>


Just because that's the only way I've found to embed pdf's. How would an object tag work? I'd be more than willing to give your solution a shot.

Thats fine - I'm not a genius in the particulars of <embed> and <object> - only when I work with SVG (hisssssss) I use <object>

My code should work for <embed> as well, thus:

HTML:

<EMBED onload="stopWait(this)" style="display: none;" src="./data/fs1/Test.pdf" width="1200" height="800" PLUGINSPAGE="http://www.adobe.com/products/acrobat/readstep2.html"></EMBED>

<div id="wait">Please Wait, Loading...</div>


JS:


function stopWait(elm)
{
elm.style.display = "block";
document.getElementById('wait').style.display = "none";
}

Here's the code i've tried

<html>
<head>
<title>Testing</title>
</head>
<body>
<script type="text/javascript">
function stopWait(elm)
{
elm.style.display = "block";
document.getElementById('wait').style.display = "none";
}
</script>

<EMBED onload="stopWait(this)" style="display: none;" src="./data/fs1/Test.pdf" width="1200" height="800" PLUGINSPAGE="http://www.adobe.com/products/acrobat/readstep2.html"></EMBED>

<div id="wait">Please Wait, Loading...</div>


</body>
</html>


It never calls the onload command. So the please wait is the only this that will be displayed, no matter how long you wait.