pdf.js 添加自定义loading动画

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

于是加了个loading动画。

 1     <div id="loadingContainer">
 2       <div class="spinner">
 3         <div class="spinner-container container1">
 4           <div class="circle1"></div>
 5           <div class="circle2"></div>
 6           <div class="circle3"></div>
 7           <div class="circle4"></div>
 8         </div>
 9         <div class="spinner-container container2">
10           <div class="circle1"></div>
11           <div class="circle2"></div>
12           <div class="circle3"></div>
13           <div class="circle4"></div>
14         </div>
15         <div class="spinner-container container3">
16           <div class="circle1"></div>
17           <div class="circle2"></div>
18           <div class="circle3"></div>
19           <div class="circle4"></div>
20         </div>
21       </div>
22     </div>
html
  1 #loadingContainer {
  2     width: 100%;
  3     height: 100%;
  4     display: flex;
  5     align-items: center;
  6     flex: 1;
  7     z-index: 999;
  8     .spinner {
  9         margin: 100px auto;
 10         width: 20px;
 11         height: 20px;
 12         position: relative;
 13         .container1>div,
 14         .container2>div,
 15         .container3>div {
 16             width: 6px;
 17             height: 6px;
 18             background-color: #fff;
 19             border-radius: 100%;
 20             position: absolute;
 21             -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
 22             animation: bouncedelay 1.2s infinite ease-in-out;
 23             -webkit-animation-fill-mode: both;
 24             animation-fill-mode: both;
 25         }
 26         .spinner-container {
 27             position: absolute;
 28             width: 100%;
 29             height: 100%;
 30         }
 31         .container2 {
 32             -webkit-transform: rotateZ(45deg);
 33             transform: rotateZ(45deg);
 34         }
 35         .container3 {
 36             -webkit-transform: rotateZ(90deg);
 37             transform: rotateZ(90deg);
 38         }
 39         .circle1 {
 40             top: 0;
 41             left: 0;
 42         }
 43         .circle2 {
 44             top: 0;
 45             right: 0;
 46         }
 47         .circle3 {
 48             right: 0;
 49             bottom: 0;
 50         }
 51         .circle4 {
 52             left: 0;
 53             bottom: 0;
 54         }
 55         .container2 .circle1 {
 56             -webkit-animation-delay: -1.1s;
 57             animation-delay: -1.1s;
 58         }
 59         .container3 .circle1 {
 60             -webkit-animation-delay: -1.0s;
 61             animation-delay: -1.0s;
 62         }
 63         .container1 .circle2 {
 64             -webkit-animation-delay: -0.9s;
 65             animation-delay: -0.9s;
 66         }
 67         .container2 .circle2 {
 68             -webkit-animation-delay: -0.8s;
 69             animation-delay: -0.8s;
 70         }
 71         .container3 .circle2 {
 72             -webkit-animation-delay: -0.7s;
 73             animation-delay: -0.7s;
 74         }
 75         .container1 .circle3 {
 76             -webkit-animation-delay: -0.6s;
 77             animation-delay: -0.6s;
 78         }
 79         .container2 .circle3 {
 80             -webkit-animation-delay: -0.5s;
 81             animation-delay: -0.5s;
 82         }
 83         .container3 .circle3 {
 84             -webkit-animation-delay: -0.4s;
 85             animation-delay: -0.4s;
 86         }
 87         .container1 .circle4 {
 88             -webkit-animation-delay: -0.3s;
 89             animation-delay: -0.3s;
 90         }
 91         .container2 .circle4 {
 92             -webkit-animation-delay: -0.2s;
 93             animation-delay: -0.2s;
 94         }
 95         .container3 .circle4 {
 96             -webkit-animation-delay: -0.1s;
 97             animation-delay: -0.1s;
 98         }
 99     }
100 }
101 
102 @-webkit-keyframes bouncedelay {
103     0%,
104     80%,
105     100% {
106         -webkit-transform: scale(0.0)
107     }
108     40% {
109         -webkit-transform: scale(1.0)
110     }
111 }
112 
113 @keyframes bouncedelay {
114     0%,
115     80%,
116     100% {
117         transform: scale(0.0);
118         -webkit-transform: scale(0.0);
119     }
120     40% {
121         transform: scale(1.0);
122         -webkit-transform: scale(1.0);
123     }
124 }
scss

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

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

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

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

修改后

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

 

posted @ 2017-02-27 16:42  jewely  阅读(1774)  评论(0)  编辑  收藏  举报