使用Javascript创建PDF预加载器

Question

我有一个网站，显示嵌入在浏览器中的pdf文件。代码如下：

document.getElementById("bigone").innerHTML = 
'<object type="application/pdf" data="\\PDF\\somefile.pdf" width=100% height="720px"></object>'; 

基本上使用innerHTML插入一个带有PDF作为其数据的对象标签（“bigone”是一个表格单元格）。这工作得很好，但是有时PDF需要很长时间才能加载，而且用户面临空白屏幕。我想插入一个图像预加载器（如文本“LOADING ...”），而PDF文件在后台下载。

我在JS中使用了图像对象，但没有成功。

document.getElementById("bigone").innerHTML = '<img src="gradients\\loading.png" />' 
var pdf = new Image(); 
pdf.src = "\\PDF\\somefile.pdf"; 
pdf.onLoad = function() { 
document.getElementById("bigone").innerHTML = '<object type="application/pdf" data="\\PDF\\somefile.pdf" width=100% height="720px"></object>'; 
} 

这不起作用，preloader图像出现，但不会被嵌入式PDF取代。我将pdf.onLoad放入警报中，并返回null。我的代码有什么问题吗？或者任何人有什么想法？谢谢。

Answer 1

无法将PDF文件加载到Image对象中... Image对象用于图像。

我要做的是在HTML中创建一个DIV元素，该元素是将要放入OBJECT元素的PDF文件的容器。

然后我可以将background-image样式属性设置为加载图片，以便在加载PDF时，人们可以在背景中看到“加载”图像，一旦加载PDF，它将出现在加载图片让人们再也看不到了。

<td id="bigone"> 
    <div id="pdf_container" style="background-image: url('\\gradients\\loading.png'); background-repeat: none; background-position: 50% 50%; height: 720px; width: 100%;"> 
    </div> 
</td> 

<script type="text/javascript"> 
    document.getElementById("pdf_container").innerHTML = '<object type="application/pdf" data="\\PDF\\somefile.pdf" width=100% height="720px"></object>'; 
</script> 

报废，你可以将该背景图像应用于表单元格，而不必创建新的DIV元素。