Show loading image when pdf rendering

Question

I am displaying pdf on my page like this

<object data="/Customer/GetPricedMaterialPDF?projID=<%= ViewData["ProjectID"]%>"
    type="application/pdf" width="960" height="900" style="margin-top: -33px;">
    <p>
        It appears you don't have a PDF plugin for this browser. No biggie... you can <a
            href="/Customer/GetPricedMaterialPDF?projID=<%= ViewData["ProjectID"]%>">click
            here to download the PDF file. </a>
    </p>
</object>

and Controller function are

 public FileStreamResult GetPricedMaterialPDF(string projID)
        {
            System.IO.Stream fileStream = GeneratePDF(projID);
            HttpContext.Response.AddHeader("content-disposition",
               "attachment; filename=form.pdf");
            return new FileStreamResult(fileStream, "application/pdf");

        }



private System.IO.Stream GeneratePDF(string projID)
        {
            //create your pdf and put it into the stream... pdf variable below
            //comes from a class I use to write content to PDF files

            System.IO.MemoryStream ms = new System.IO.MemoryStream();
            Project proj = GetProject(projID);
            List<File> ff = proj.GetFiles(Project_Thin.Folders.IntegrationFiles, true);
            string fileName = string.Empty;
            if (ff != null && ff.Count > 0 && ff.Where(p => p.AccessToUserID == CurrentCustomer.CustomerID).Count() > 0)
            {
                ff = ff.Where(p => p.AccessToUserID == CurrentCustomer.CustomerID).ToList();
                foreach (var item in ff)
                {
                    fileName = item.FileName;
                }

                byte[] bArr = new byte[] { };
                bArr = GetJDLFile(fileName);
                ms.Write(bArr, 0, bArr.Length);
                ms.Position = 0;
            }
            return ms;
        }

Now my problem is function on controller taking 10 to 20 second to process pdf,

data="/Customer/GetPricedMaterialPDF?projID=<%= ViewData["ProjectID"]%>"

at that time my page shows blank, which i don't want. i want to show loading image at that time. How can i do this...

Answer 1

If you put a <div> on your page at exactly the position of the <object> element with a lower z-index, so that it is completely covered by the latter, you might be lucky when the user agent shows it as long as it doesn't get any header sent (and doesn't give control of the assigned surface to the PDF reader). You can put your message or (animating) image in it.

If you put the image alongside the <object>, it will be shown forever, as you cannot determine whether the complete PDF file has been transferred or not.