使用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元素。