最近做了个手机端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>
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 }
本以为加个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) {
修改后
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) {