pdf.js 添加自定义loading动画

最近做了个手机端pdf预览的功能，用到pdf.js这个库，效果还不错。但是在网络差、文件大时，页面一直空白，体验不是很好。

于是加了个loading动画。

     <div id="loadingContainer">
       <div class="spinner">
         <div class="spinner-container container1">
           <div class="circle1"></div>
           <div class="circle2"></div>
           <div class="circle3"></div>
           <div class="circle4"></div>
         </div>
         <div class="spinner-container container2">
           <div class="circle1"></div>
           <div class="circle2"></div>
           <div class="circle3"></div>
           <div class="circle4"></div>
         </div>
         <div class="spinner-container container3">
           <div class="circle1"></div>
           <div class="circle2"></div>
           <div class="circle3"></div>
           <div class="circle4"></div>
         </div>
       </div>
     </div>

html

 #loadingContainer {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     flex:;
     z-index:;
     .spinner {
         margin: 100px auto;
         width: 20px;
         height: 20px;
         position: relative;
         .container1>div,
         .container2>div,
         .container3>div {
             width: 6px;
             height: 6px;
             background-color: #fff;
             border-radius: 100%;
             position: absolute;
             -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
             animation: bouncedelay 1.2s infinite ease-in-out;
             -webkit-animation-fill-mode: both;
             animation-fill-mode: both;
         }
         .spinner-container {
             position: absolute;
             width: 100%;
             height: 100%;
         }
         .container2 {
             -webkit-transform: rotateZ(45deg);
             transform: rotateZ(45deg);
         }
         .container3 {
             -webkit-transform: rotateZ(90deg);
             transform: rotateZ(90deg);
         }
         .circle1 {
             top:;
             left:;
         }
         .circle2 {
             top:;
             right:;
         }
         .circle3 {
             right:;
             bottom:;
         }
         .circle4 {
             left:;
             bottom:;
         }
         .container2 .circle1 {
             -webkit-animation-delay: -1.1s;
             animation-delay: -1.1s;
         }
         .container3 .circle1 {
             -webkit-animation-delay: -1.0s;
             animation-delay: -1.0s;
         }
         .container1 .circle2 {
             -webkit-animation-delay: -0.9s;
             animation-delay: -0.9s;
         }
         .container2 .circle2 {
             -webkit-animation-delay: -0.8s;
             animation-delay: -0.8s;
         }
         .container3 .circle2 {
             -webkit-animation-delay: -0.7s;
             animation-delay: -0.7s;
         }
         .container1 .circle3 {
             -webkit-animation-delay: -0.6s;
             animation-delay: -0.6s;
         }
         .container2 .circle3 {
             -webkit-animation-delay: -0.5s;
             animation-delay: -0.5s;
         }
         .container3 .circle3 {
             -webkit-animation-delay: -0.4s;
             animation-delay: -0.4s;
         }
         .container1 .circle4 {
             -webkit-animation-delay: -0.3s;
             animation-delay: -0.3s;
         }
         .container2 .circle4 {
             -webkit-animation-delay: -0.2s;
             animation-delay: -0.2s;
         }
         .container3 .circle4 {
             -webkit-animation-delay: -0.1s;
             animation-delay: -0.1s;
         }
     }
 }

 @-webkit-keyframes bouncedelay {
     0%,
     80%,
     100% {
         -webkit-transform: scale(0.0)
     }
     40% {
         -webkit-transform: scale(1.0)
     }
 }

 @keyframes bouncedelay {
     0%,
     80%,
     100% {
         transform: scale(0.0);
         -webkit-transform: scale(0.0);
     }
     40% {
         transform: scale(1.0);
         -webkit-transform: scale(1.0);
     }
 }

scss

本以为加个DOMContentLoaded事件监视移除动画就OK了。too young too simple

DOMContentLoaded完成时，pdf文件还没下载完成。看来用错了地方。查了下api后，定位到viewer.js 行号6029

如下就是pdf加载完成回调（不同版本可能略有不同）

 loadingTask.onUnsupportedFeature = this.fallback.bind(this);
      return loadingTask.promise.then(function getDocumentCallback(pdfDocument) {
       self.load(pdfDocument, scale);
      }, function getDocumentError(exception) {

source

修改后

 loadingTask.onUnsupportedFeature = this.fallback.bind(this);
      return loadingTask.promise.then(function getDocumentCallback(pdfDocument) {
       self.load(pdfDocument, scale);
       var loading = document.getElementById('loadingContainer');
       loading && loading.remove();
      }, function getDocumentError(exception) {

target