如何在显示 pdf 文件之前加载加载程序图像

How to load loader image before the pdf file is shown?

本文关键字：加载 程序 图像 文件 显示 pdf      更新时间：2023-09-26

我有<a>标签。该标签的 href 是 PDF 文件。我想在 10 秒后加载该 pdf 文件，直到我想显示加载器。我做了谷歌，我得到了一个jQuery BlockUI插件。当我没有传递任何内容时，它可以工作href即 # .

.HTML 

<head>
   <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
   <script src="jquery.blockUI.js"></script>
</head>
<body>
   <a class="question" href="Application_Form.pdf" id="demo2">Testing</a>
</body>

JavaScript

<script type="text/javascript">
$(document).ready(function() { 
    $('#demo2').click(function() { 
        $.blockUI({ css: { 
            border: 'none', 
            padding: '15px', 
            backgroundColor: '#000', 
            '-webkit-border-radius': '10px', 
            '-moz-border-radius': '10px', 
            opacity: .5, 
            color: '#fff' 
        } }); 
        setTimeout($.unblockUI, 10000); 
    }); 
});
</script>

如何做到这一点。

我做了很多谷歌，但我不知道如何去做。

请任何人都可以帮助我解决这个问题。提前谢谢..

你只是错过了将 jQuery 魔法包装在 $(document(.ready(function(({ } 中的朋友(;你可以在jQuery代码中尝试这个：

$(document).ready(function(){
$('#demo2').click(function() { 
    $.blockUI({ css: { 
        border: 'none', 
        padding: '15px', 
        backgroundColor: '#000', 
        '-webkit-border-radius': '10px', 
        '-moz-border-radius': '10px', 
        opacity: .5, 
        color: '#fff' 
    } }); 
    setTimeout(function() { 
        $.unblockUI({ 
            onUnblock: function(){ alert('hi'); // Show your pdf file here
            } 
        }); 
    }, 2000); 
});
});
相关文章：