如何在加载pdf文件之前显示加载图标 - How to display loading icon until pdf file is loaded?

How to display loading icon until pdf file is loaded?

本文关键字：加载显示图标 pdf 文件 | 更新日期: 2023-10-18

我想显示加载图标，直到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>

不能只使用iFrame来显示PDF。如果你想在网页上嵌入PDF，你应该使用像PDF.js.这样的JavaScript库

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

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

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

因此，使用类似的JavaScript库https://github.com/mozilla/pdf.js以呈现PDF，并使用上面的jQuery事件来侦听页面何时完全加载。