heyang vor 4 Jahren
Ursprung
Commit
3d98492716
1 geänderte Dateien mit 26 neuen und 18 gelöschten Zeilen
  1. 26 18
      microserviceUserH5/vcloud/zhongqiuActivity.html

+ 26 - 18
microserviceUserH5/vcloud/zhongqiuActivity.html

@@ -26,18 +26,19 @@
 			width: 3.26rem;
 			height: 0.88rem;
 		}
-		.header{
+		.imgs{
 			width: 7.5rem;
-			height: 33vh;
+			height: 33.33vh;
+			display: block;
 		}
-		.middle{
+		/* .middle{
 			width: 7.5rem;
 			height: 33vh;
 		}
 		.footer{
 			width: 7.5rem;
 			height: 34vh;
-		}
+		} */
 		.img{
 			width: 100%;
 			height: 100%;
@@ -47,15 +48,6 @@
 
 <body>
 	<div class="container">
-		<div class="header">
-			<img class="img" src="../static/img/zhongqiuActivity/header.png" />
-		</div>
-		<div class="middle">
-			<img class="img" src="../static/img/zhongqiuActivity/middle.png" />
-		</div>
-		<div class="footer">
-			<img class="img" src="../static/img/zhongqiuActivity/footer.png" />
-		</div>
 		<div class="btn-content" id="js_btn">
 			<img class="download-app" src="../static/img/zhongqiuActivity/btn.png" />
 		</div>
@@ -80,16 +72,32 @@
 		    id = loc.substr(n2 + 1, n1 - n2),//从=号后面的内容
 			u = navigator.userAgent,
 			isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
-			isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
+			isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
+			imgs = ['../static/img/zhongqiuActivity/header.png','../static/img/zhongqiuActivity/middle.png','../static/img/zhongqiuActivity/footer.png'];
 		//长屏判断
-		console.log(document.documentElement.clientHeight)
 		if(document.documentElement.clientHeight > 736){
-			$('.img')[0].src = '../static/img/zhongqiuActivity/iphoneX01.png';
-			$('.img')[1].src = '../static/img/zhongqiuActivity/iphoneX02.png';
-			$('.img')[2].src = '../static/img/zhongqiuActivity/iphoneX03.png';
+			imgs = ['../static/img/zhongqiuActivity/iphoneX01.png','../static/img/zhongqiuActivity/iphoneX02.png','../static/img/zhongqiuActivity/iphoneX03.png'];
 			const btnContent = document.getElementsByClassName('btn-content')[0];
 			btnContent.className = 'btn-active';
 		}
+		//异步加载图片
+		async function loadAsync() {
+			let promise = function(url) {
+				return new Promise((resolve, reject) => {
+				const image = new Image();
+				image.src = url;
+				image.className = 'imgs';
+				image.onload = function() {
+					document.body.appendChild(image);
+					resolve('ok');
+				}        
+				})      
+			}
+			for(let url of imgs) {
+				await promise(url);
+			}
+		}
+        loadAsync();
 		//埋点
 		if(isAndroid){
 			operate('中秋活动落地页');