如何在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-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);

}

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

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>

尝试这个