如何在加载pdf文件之前显示加载图标?
Posted
技术标签:
【中文标题】如何在加载pdf文件之前显示加载图标?【英文标题】:How to display loading icon until pdf file is loaded? 【发布时间】: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 确实需要一段时间才能加载。 【参考方案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,但我不推荐它!以上是关于如何在加载pdf文件之前显示加载图标?的主要内容,如果未能解决你的问题,请参考以下文章