如何在加载pdf文件之前显示加载图标？答案

【问题标题】：How to display loading icon until pdf file is loaded?如何在加载pdf文件之前显示加载图标？
【发布时间】：2015-04-18 05:08:13
【问题描述】：

我想显示加载图标，直到将 pdf 加载到网页中。我已经粘贴了我尝试过的内容，但即使 pdf 已完全加载，加载图标也会继续显示。从JSFiddle获得此代码

    <html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
iframe {
    width: 100%;
    height: 100%;
    border: 5px solid green;
}
</style>
<script>
$(function(){
    var $iFrame = $('iframe'); 
    $iFrame.load(function(){
        $('h3').html('PDF Loaded!');
    });

    $('h3').html('Loading PDF...');
    $iFrame.attr('src', 'http://listic.ru/jQuery_Cookbook.pdf');


});
</script>
</head>
<body>
<h3></h3>
<iframe></iframe>
</body>
</html>

【问题讨论】：

您的控制台是否出现任何错误？我试过运行代码，我看到 pdf url 确实需要一段时间才能加载。

标签： php jquery html pdf

【解决方案1】：

您不能只使用 iFrame 来显示 PDF。如果您想将 PDF 嵌入网页中，您应该使用 pdf.js 之类的 JavaScript 库。

不管怎样，用这个http://jsfiddle.net/BXe8C/497/

一旦 DOM（文档）下载完毕，$(document).ready(function() { 事件就会触发。

当页面上的所有元素完全加载时，$(document).load(function() { 事件会触发。

所以使用像 https://github.com/mozilla/pdf.js 这样的 JavaScript 库来呈现 PDF，并使用上面的 jQuery 事件来监听页面何时完全加载。

【讨论】：

显然有些浏览器在 iFrames 中支持 PDF，但我不推荐它！