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

Question

我有一个包含pdf-viewer的div，它是从一些内部调用加载到其中的。文档的加载有延迟，用户不知道是否加载。我想把一个加载器放到那个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>

尝尝这个