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

Question

我有一个div包含一个pdf-viewerand 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>

试试这个