【问题标题】：How to create a loader in pdf-viewer如何在 pdf-viewer 中创建加载程序
【发布时间】：2018-08-14 00:00:40
【问题描述】：

我有一个div，其中包含一个pdf-viewer，并且正在从一些内部调用将PDF 加载到其中。文档会延迟加载，用户不知道它是否加载。我想将加载器放入该 PDF 容器中，以便加载器出现，直到页面加载到容器中（pdf-viewer）。我环顾四周，但无法从建议中得出任何结论。这是我创建 PDF 容器的代码，

<div id="viewer" class="pdf-viewer"  data-url="../sadmin/studyMaterial/<?php echo $db->idToField("tbl_studymaterials", "file_ppt", $chapterId) ; ?>"> </div>

pdf-viewer 类，

.pdf-viewer {


  background: #909090;
  -background: #000000;

  border: 1px solid #ddd;

  height: 400px;


  position: relative;

  overflow: hidden;

  -webkit-border-radius: 4px;

     -moz-border-radius: 4px;

          border-radius: 4px;

  -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);

     -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);

          box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);

}

任何建议都会非常有帮助。

【问题讨论】：

您能解释一下您是如何显示 pdf 的吗？您为此使用了任何模块吗？
这是通过使用 data-url 属性。 JS
请分享你的js代码
实际上data-url 如您所见正在制作要显示的pdf。它创建了一个 js 变量。
在查看器div之后显示加载器图像，最初应该是隐藏的....点击查看器div后...使加载器图像显示块...并在pdf成功后隐藏查看器显示

标签： php html mysql loader

【解决方案1】：

最简单的解决方案是使用后台加载 gif 图片：

.pdf-container{
    position: relative;
}
.pdf-loader{
    height: 20px;   /*gif image height*/
    width: 20px;    /*gif image height*/
    position: absolute;
    background:url(../img/loading-gif.gif) left top no-repeat;
    /*These positions will show gif image at top left corner, you can adjust them later according to your requiremnets*/
    left: 0;    
    top: 0;
}
.pdf-viewer{
    z-index: 1; /*Add only z-index property in your current class, do not replace it*/
}

并使用这个 div 结构：

<div class="pdf-container">
<div class="pdf-loader"></div>
<div id="viewer" class="pdf-viewer"  data-url="../sadmin/studyMaterial/<?php echo $db->idToField("tbl_studymaterials", "file_ppt", $chapterId) ; ?>"> </div>
</div>

试试这个

【讨论】：

感谢您的回答，但我可以知道我应该如何在 .pdf-loader 类中为我的 GIF 提供路径吗？
在你的css文件中写一个类，把图片放在你的images文件夹中，并在.pdf-loader类中更新gif图像的路径，例如background:url(../img/loading-gif.gif)中心中心不重复;
谢谢。我尝试了同样的方法，但现在的问题是，一旦加载内容，GIF 就不会消失。它一直在后台运行，向下滚动时可以在两页之间看到。
好的，在这种情况下使用这个：
">
很抱歉，但使用上述行完全删除了 GIF。我的意思是它根本不可见。