php - 如何在 pdf-viewer 中创建加载器

Question

我有一个包含 pdf-viewer 的 div 并且 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 查看器类，

.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);

}

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

Answer 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>

试试这个