Selaa lähdekoodia

周年庆活动图片做预加载

heyang 3 vuotta sitten
vanhempi
commit
cef582c118

+ 18 - 4
microserviceUserH5/static/css/anniversaryCelebrate.css

@@ -575,8 +575,6 @@ ul, li {
 .award-result-dialog{
   width: 5.52rem;
   height: 9.21rem;
-  background: url(../../static/img/anniversaryCelebrate/result-bg.png) no-repeat;
-  background-size: 100% 100%;
   border-radius: 0.2rem;
   position: absolute;
   left: 50%;
@@ -584,6 +582,15 @@ ul, li {
   transform: translateX(-50%);
 }
 
+.result-bg{
+  width: 5.52rem;
+  height: 9.21rem;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: none;
+}
+
 .law-result-dialog{
   width: 5.52rem;
   height: 7.16rem;
@@ -611,8 +618,6 @@ ul, li {
 .award-result-one-dialog{
   width: 5.52rem;
   height: 8.11rem;
-  background: url(../../static/img/anniversaryCelebrate/result-once-bg.png) no-repeat;
-  background-size: 100% 100%;
   border-radius: 0.2rem;
   position: absolute;
   left: 50%;
@@ -620,6 +625,15 @@ ul, li {
   transform: translateX(-50%);
 }
 
+.result-once-bg{
+  width: 5.52rem;
+  height: 8.11rem;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: none;
+}
+
 .distribution-time-dialog{
   width: 6.48rem;
   height: 6.56rem;

+ 29 - 2
microserviceUserH5/vcloud/anniversaryCelebrate.html

@@ -304,7 +304,7 @@
 	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
 	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
 	<script type="text/javascript">
-        // var baseUrl = 'http://prese.phone.androidscloud.com'
+        var baseUrl = 'http://prese.phone.androidscloud.com'
 	    let timer,flag = true;
 		var url = window.location.href;
 		url = url.split('/')
@@ -343,7 +343,30 @@
 			recordFlags = true,
 			userCardId = '',
 		    sliderNumber = 0,//滑块是数量,控制溢出不能滑动
-			isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
+			isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
+			imgs = ['../static/img/anniversaryCelebrate/result-bg.png','../static/img/anniversaryCelebrate/result-once-bg.png'];
+		//异步加载图片
+		async function loadAsync() {
+			let promise = function(url) {
+				return new Promise((resolve, reject) => {
+				const image = new Image();
+				image.src = url;
+				if(image.src.includes('result-bg')){
+					image.className = 'result-bg';
+				}else{
+					image.className = 'result-once-bg';
+				}
+				image.onload = function() {
+					$('.award-result-dialog-sure')[0].insertBefore(image, $('.have-times-wrap')[0]);
+					resolve('ok');
+				}        
+				})      
+			}
+			for(let url of imgs) {
+				await promise(url);
+			}
+		}
+        loadAsync();
 		// 初始化数据
 		init();
 		if(id){
@@ -516,6 +539,8 @@
 						$('.award-result-wrap').eq(0).text('');
 						if(times === 1){
 							$('.award-result-dialog-sure')[0].className = 'award-result-dialog-sure award-result-one-dialog';
+							$('.result-bg').hidden();
+							$('.result-once-bg').show();
 							$('.award-result-tip').eq(0).text('换个姿势,再抽一次');
 							$('.award-result-wrap')[0].className = 'card-wrap award-result-wrap one-result';
 							for (let i = 0; i < list.length; i++) {
@@ -588,6 +613,8 @@
 							},1000);
 						} else {
 							$('.award-result-dialog-sure')[0].className = 'award-result-dialog-sure award-result-dialog';
+							$('.result-once-bg').hidden();
+							$('.result-bg').show();
 							$('.award-result-tip').eq(0).text('善良的人,好运气最终是会眷顾你');
 							$('.award-result-wrap')[0].className = 'card-wrap award-result-wrap many-card-wrap'
 							for (let i = 0; i < list.length; i++) {