项目中遇到的，用vue实现下：
1 <template>
2 <div class="plLoading">
3 <div class="plLoadingContent">
4 <div class="plLoadingLogo">
5 <img src="http://static.crecgec.com/Kaipiao/loadingLogo.png"/>
6 </div>
7 <div class="plLoadingCon">
8 <div class="plLoadingShow" ref="plLoadingShow" :style="{width: plsStyleWidth}"></div>
9 <div class="plLoCir" ref="plLoCir" :style="{left: plcStyleLeft}" v-show="plcShow"></div>
10 </div>
11 <div class="plLoadingNum" ref="plLoadingNum">0%</div>
12 </div>
13 <!--测试用的，使用的时候，在父组件创建一个隐藏的Ddiv，里面放入这个页面用到的所有img-->
14 <div class="imgsHidden displayNone">
15 <img class="hImg" src="http://static.crecgec.com/Kaipiao/countDownTitle.png">
16 <img class="hImg" src="http://static.crecgec.com/Kaipiao/countDown.png">
17 <img class="hImg" src="http://static.crecgec.com/Kaipiao/countDown1.png">
18 <img class="bImg" src="http://static.crecgec.com/Kaipiao/background.png">
19 <img class="hImg" src="http://static.crecgec.com/Kaipiao/loadingLogo.png">
20 </div>
21 </div>
22 </template>
23
24 <script type="text/ecmascript-6">
25 import $ from ‘jquery‘
26
27 export default {
28 props: {
29 eleH: {
30 type: String,
31 default: ‘hImg‘
32 },
33 eleB: {
34 type: String,
35 default: ‘bImg‘
36 },
37 dataIsOk: {
38 type: Boolean,
39 default: false
40 }
41 },
42 data () {
43 return {
44 plsStyleWidth: 0, // plLoadingShow的初始width
45 plcStyleLeft: 0, // plLoCir的初始left值
46 plcShow: true, // plLoCir初始是显示状态
47 backImgLoading: false, // 背景图片是否加载成功(40)
48 otherImgLoading: false, // 头部、底部图片加载成功(40)
49 dataLoading: ‘‘, // 后台返回的数据加载成功(20)
50 lodingWidth: 0,
51 otherImgLength: 0,
52 otherNum: 0,
53 backImgLength: 0,
54 backNum: 0
55 }
56 },
57 watch: {
58 // 整个也没被分为三部分：背景图、其他图片、数据
59 // 监控otherImgLoading，（其他图片加载成功），this.lodingWidth增加40
60 otherImgLoading () {
61 this.lodingWidth = this.lodingWidth + 40
62 },
63 // 监控otherImgLoading，（背景图片加载成功），this.lodingWidth增加40
64 backImgLoading () {
65 this.lodingWidth = this.lodingWidth + 40
66 },
67 // 监控dataIsOk，（数据加载成功，这个有父组件传递过来），this.lodingWidth增加20
68 dataIsOk () {
69 if (this.dataIsOk) {
70 this.lodingWidth = this.lodingWidth + 20
71 }
72 },
73 // 监控lodingWidth的值
74 lodingWidth () {
75 if (this.lodingWidth <= 100) {
76 this.setLoadingWidthTimer(this.lodingWidth)
77 }
78 },
79 // 监控plcStyleLeft（圆球的left值），如果值为484px（自己设置的），表明圆球到了最右边
80 // 圆球隐藏
81 plcStyleLeft () {
82 if (this.plcStyleLeft === ‘484px‘) {
83 setTimeout(() => {
84 this.plcShow = false
85 this.hasScroll()
86 this.$emit(‘tipShow‘, {loadingIsShow: false})
87 }, 500)
88 }
89 }
90 },
91 mounted () {
92 this.isOtherImgLoading(this.eleH)
93 this.isBackImgLoading(this.eleB)
94 this.noScroll()
95 },
96 methods: {
97 // 设置width、left
98 setLoadingWidthTimer (newPllsWidth) {
99 if (newPllsWidth <= 40) {
100 setTimeout(() => {
101 this.plsStyleWidth = (500 * newPllsWidth / 100) + ‘px‘
102 this.plcStyleLeft = (475 * newPllsWidth / 100) + ‘px‘
103 this.$refs.plLoadingNum.innerHTML = newPllsWidth + ‘%‘
104 }, 500)
105 } else if (newPllsWidth <= 80) {
106 setTimeout(() => {
107 this.plsStyleWidth = (500 * newPllsWidth / 100) + ‘px‘
108 this.plcStyleLeft = (484 * newPllsWidth / 100) + ‘px‘
109 this.$refs.plLoadingNum.innerHTML = newPllsWidth + ‘%‘
110 }, 1000)
111 } else {
112 setTimeout(() => {
113 this.plsStyleWidth = (500 * newPllsWidth / 100) + ‘px‘
114 this.plcStyleLeft = (484 * newPllsWidth / 100) + ‘px‘
115 this.$refs.plLoadingNum.innerHTML = newPllsWidth + ‘%‘
116 }, 1500)
117 }
118 },
119 // 弹出层显示的时候，没有滚动条
120 noScroll () {
121 document.body.style.cssText = ‘overflow:hidden;‘
122 },
123 // 弹出层消失后，滚动条显示
124 hasScroll () {
125 document.body.style.cssText = ‘overflow:auto;‘
126 },
127 isOtherImgLoading (ele) {
128 this.otherImgLength = $(‘.‘ + ele).length
129 let _this = this
130 if (this.otherImgLength > 0) {
131 $(‘.‘ + ele).each(function () {
132 $(this).on(‘load‘, function () {
133 _this.otherNum = _this.otherNum + 1
134 if (_this.otherImgLength === _this.otherNum) {
135 _this.otherImgLoading = true
136 }
137 })
138 })
139 } else {
140 this.otherImgLoading = true
141 }
142 },
143 isBackImgLoading (ele) {
144 this.backImgLength = $(‘.‘ + ele).length
145 let _this = this
146 if (this.backImgLength > 0) {
147 $(‘.‘ + ele).each(function () {
148 $(this).on(‘load‘, function () {
149 _this.backNum = _this.backNum + 1
150 if (_this.backImgLength === _this.backNum) {
151 _this.backImgLoading = true
152 }
153 })
154 })
155 } else {
156 this.backImgLoading = true
157 }
158 }
159 }
160 }
161 </script>
162
163 <style>
164 .plLoading{
165 width: 100%;
166 height: 100%;
167 position: absolute;
168 left: 0;
169 top: 0;
170 z-index: 100;
171 background-color: #00101d;
172 }
173 .plLoadingContent{
174 width: 500px;
175 height: 220px;
176 position: absolute;
177 margin: 0 auto;
178 top: 50%;
179 left: 50%;
180 margin-top: -110px;
181 margin-left: -250px;
182 }
183 .plLoadingLogo{
184 height: 60px;
185 }
186 .plLoadingCon{
187 width: 500px;
188 height: 16px;
189 margin-top: 100px;
190 border-radius: 8px;
191 background-color: #222222;
192 }
193 .plLoadingShow{
194 transition: width .5s;
195 height: 16px;
196 border-radius: 8px;
197 background-color: #0062b2;
198 position: absolute;
199 }
200 .plLoCir{
201 transition: left .5s;
202 position: absolute;
203 width: 16px;
204 height: 16px;
205 border-radius: 8px;
206 background-color: #0062b2;
207 box-shadow: 0 0 20px #008cff;
208 }
209 .plLoadingNum{
210 font-size: 14px;
211 color: #0062b2;
212 margin-top: 20px;
213 }
214 .displayNone{
215 display: none;
216 }
217 </style>
时间： 2024-10-12 00:41:06