moliparty/peko-h5
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化图片加载过慢问题

Browse Source
This commit is contained in:
Dragon
2023-07-05 14:16:21 +08:00
parent 518bac9298
commit 180d64064a
10 changed files with 99 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
view/peko/activity/act-ocean/images/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

BIN
view/peko/activity/act-ocean/images/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
view/peko/activity/act-ocean/images/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
view/peko/activity/act-ocean/images/4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
view/peko/activity/act-ocean/images/5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
view/peko/activity/act-ocean/images/6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
view/peko/activity/act-ocean/images/7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
view/peko/activity/act-ocean/images/8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

86
view/peko/activity/act-ocean/index.html
View File

@@ -6,7 +6,6 @@
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>星级厨房</title>
<link rel="stylesheet" href="../../common/css/reset.css">
<link rel="stylesheet" href="./css/index.css?v=2.2">
</head>
@@ -36,7 +35,7 @@
<div class="recharge"><img src="./images/mall/recharge.png" alt=""></div>
</div>
<!-- 游戏区域 -->
<div class="game-area" style="display: none;">
<div class="game-area" >
<!-- 本轮轮次 -->
<div class="roundId"></div>
<!-- 选择时间 -->
@@ -50,7 +49,86 @@
<div>10000</div>
</div>
<ul>
<!-- <li class="li0" data-total-num="">
<img src="./images/1.png" alt="">
<div class="multiple"></div>
<div class="name general"></div>
<div class="bubble-2s">
<p class="first-line">點擊選取</p>
<p class="second-line">賺 <span></span> 倍獎勵</p>
</div>
<div class="select-num"></div>
</li>
<li class="li1" data-total-num="">
<img src="./images/2.png" alt="">
<div class="multiple"></div>
<div class="name general"></div>
<div class="bubble-2s">
<p class="first-line">點擊選取</p>
<p class="second-line">賺 <span></span> 倍獎勵</p>
</div>
<div class="select-num"></div>
</li>
<li class="li2" data-total-num="">
<img src="./images/3.png" alt="">
<div class="multiple"></div>
<div class="name general"></div>
<div class="bubble-2s">
<p class="first-line">點擊選取</p>
<p class="second-line">賺 <span></span> 倍獎勵</p>
</div>
<div class="select-num"></div>
</li>
<li class="li3" data-total-num="">
<img src="./images/4.png" alt="">
<div class="multiple"></div>
<div class="name general"></div>
<div class="bubble-2s">
<p class="first-line">點擊選取</p>
<p class="second-line">賺 <span></span> 倍獎勵</p>
</div>
<div class="select-num"></div>
</li>
<li class="li4" data-total-num="">
<img src="./images/5.png" alt="">
<div class="multiple"></div>
<div class="name general"></div>
<div class="bubble-2s">
<p class="first-line">點擊選取</p>
<p class="second-line">賺 <span></span> 倍獎勵</p>
</div>
<div class="select-num"></div>
</li>
<li class="li5" data-total-num="">
<img src="./images/6.png" alt="">
<div class="multiple"></div>
<div class="name general"></div>
<div class="bubble-2s">
<p class="first-line">點擊選取</p>
<p class="second-line">賺 <span></span> 倍獎勵</p>
</div>
<div class="select-num"></div>
</li>
<li class="li6" data-total-num="">
<img src="./images/7.png" alt="">
<div class="multiple"></div>
<div class="name general"></div>
<div class="bubble-2s">
<p class="first-line">點擊選取</p>
<p class="second-line">賺 <span></span> 倍獎勵</p>
</div>
<div class="select-num"></div>
</li>
<li class="li7" data-total-num="">
<img src="./images/8.png" alt="">
<div class="multiple"></div>
<div class="name general"></div>
<div class="bubble-2s">
<p class="first-line">點擊選取</p>
<p class="second-line">賺 <span></span> 倍獎勵</p>
</div>
<div class="select-num"></div>
</li> -->
</ul>
<div class="shelf"><img src="./images/shelf.png" alt=""></div>
@@ -62,7 +140,7 @@
<div class="current-tip">等待结果</div>
</div>
<!-- 开奖展示动画时间 -->
<div class="draw-time">
<div class="draw-time" style="display: none;">
<div class="count-down">下一轮：<span class="count-down-num"></span>秒</div>
<div class="current-tip">本轮结果：<span class="current-result"></span></div>
<!-- 中奖物品展示 -->

94
view/peko/activity/act-ocean/js/index.js
View File

@@ -456,10 +456,10 @@ const renderDrawInfo = () => {
$('.wrap .game-area .draw-time .draw-pic').remove();
var lenght = drawInfo.drawItemList.length;
var drawStr = '';
drawInfo.drawItemList.forEach(res => {
drawInfo.drawItemList.forEach(item => {
drawStr += `
<div class="draw-pic">
<img src="${res.drawImageUrl}" alt="">
<img src="${item.drawName == '洋蔥' ? './images/1.png' : item.drawName == '番茄' ? './images/2.png' : item.drawName == '蘑菇' ? './images/3.png' : item.drawName == '土豆' ? './images/4.png' : item.drawName == '大閘蟹' ? './images/5.png' : item.drawName == '魚' ? './images/6.png' : item.drawName == '雞肉' ? './images/7.png' : item.drawName == '龍蝦' ? './images/8.png' : item.drawImageUrl}" alt="">
</div>
`
})
@@ -505,13 +505,13 @@ const renderDrawInfo = () => {
$('.put-wrap .list .item').remove()
// 渲染投入列表
let list = ''
drawInfo.userDrawResult.drawRecords.map(res => {
drawInfo.userDrawResult.drawRecords.map(item => {
list += `
<div class="item">
<p><img src="${res.imgUrl}" class="gift" alt=""></p>
<p><img src="${item.name == '洋蔥' ? './images/1.png' : item.name == '番茄' ? './images/2.png' : item.name == '蘑菇' ? './images/3.png' : item.name == '土豆' ? './images/4.png' : item.name == '大閘蟹' ? './images/5.png' : item.name == '魚' ? './images/6.png' : item.name == '雞肉' ? './images/7.png' : item.name == '龍蝦' ? './images/8.png' : item.imgUrl}" class="gift" alt=""></p>
<div>
<img src="./images/diamond.png" class="diamond" alt="">
<span class="in">${res.costPieceNum}</span>
<span class="in">${item.costPieceNum}</span>
</div>
</div>
`
@@ -610,10 +610,10 @@ const renderListItem = () => {
`
})
} else {
listItem.map((item) => {
listItem.forEach((item, i) => {
str += `
<li data-total-num={"number":"${item.costPieceNum}","id":"${item.id}"}>
<img src="${item.imgUrl}" alt="">
<img src="${item.name == '洋蔥' ? './images/1.png' : item.name == '番茄' ? './images/2.png' : item.name == '蘑菇' ? './images/3.png' : item.name == '土豆' ? './images/4.png' : item.name == '大閘蟹' ? './images/5.png' : item.name == '魚' ? './images/6.png' : item.name == '雞肉' ? './images/7.png' : item.name == '龍蝦' ? './images/8.png' : item.imgUrl}" alt="">
<div class="multiple">x${item.multiple}</div>
<div class="name">${item.name} <p class="gift-price">${item.price ? `(${item.price}鉆石)` : ''}</p></div>
<div class="bubble-2s">
@@ -671,13 +671,13 @@ const renderPreviousResults = (val) => {
<li>
${res.drawItemList.map(item => {
if (res.drawItemList.length == 1) {
return `<p style="width:0.8rem;height:0.8rem"><img src="${item.drawImageUrl}" alt=""></p>`;
return `<p style="width:0.8rem;height:0.8rem"><img src="${item.drawName == '洋蔥' ? './images/1.png' : item.drawName == '番茄' ? './images/2.png' : item.drawName == '蘑菇' ? './images/3.png' : item.drawName == '土豆' ? './images/4.png' : item.drawName == '大閘蟹' ? './images/5.png' : item.drawName == '魚' ? './images/6.png' : item.drawName == '雞肉' ? './images/7.png' : item.drawName == '龍蝦' ? './images/8.png' : item.drawImageUrl}" alt=""></p>`;
} else if (res.drawItemList.length == 2) {
return `<p style="width:0.6rem;height:0.6rem"><img src="${item.drawImageUrl}" alt=""></p>`;
return `<p style="width:0.6rem;height:0.6rem"><img src="${item.drawName == '洋蔥' ? './images/1.png' : item.drawName == '番茄' ? './images/2.png' : item.drawName == '蘑菇' ? './images/3.png' : item.drawName == '土豆' ? './images/4.png' : item.drawName == '大閘蟹' ? './images/5.png' : item.drawName == '魚' ? './images/6.png' : item.drawName == '雞肉' ? './images/7.png' : item.drawName == '龍蝦' ? './images/8.png' : item.drawImageUrl}" alt=""></p>`;
} else if (res.drawItemList.length == 3) {
return `<p style="width:0.45rem;height:0.45rem"><img src="${item.drawImageUrl}" alt=""></p>`;
return `<p style="width:0.45rem;height:0.45rem"><img src="${item.drawName == '洋蔥' ? './images/1.png' : item.drawName == '番茄' ? './images/2.png' : item.drawName == '蘑菇' ? './images/3.png' : item.drawName == '土豆' ? './images/4.png' : item.drawName == '大閘蟹' ? './images/5.png' : item.drawName == '魚' ? './images/6.png' : item.drawName == '雞肉' ? './images/7.png' : item.drawName == '龍蝦' ? './images/8.png' : item.drawImageUrl}" alt=""></p>`;
} else {
return `<p><img style="width:0.3333333333rem;height:0.3333333333rem" src="${item.drawImageUrl}" alt=""></p>`;
return `<p><img style="width:0.3333333333rem;height:0.3333333333rem" src="${item.drawName == '洋蔥' ? './images/1.png' : item.drawName == '番茄' ? './images/2.png' : item.drawName == '蘑菇' ? './images/3.png' : item.drawName == '土豆' ? './images/4.png' : item.drawName == '大閘蟹' ? './images/5.png' : item.drawName == '魚' ? './images/6.png' : item.drawName == '雞肉' ? './images/7.png' : item.drawName == '龍蝦' ? './images/8.png' : item.drawImageUrl}" alt=""></p>`;
}
}).join('')
@@ -705,9 +705,9 @@ const sendUserDrawInfo = (itemId, num, tais) => {
tais.data('total-num').number = parseInt(tais.data('total-num').number) + fragmentNum
tais
.stop(true, true)
.animate({ scale: 1.4,rotate:-30,}, 50)//skew(10deg, 10deg)
.animate({ scale: 1.4,rotate:30,}, 20)//skew(10deg, 10deg)
.animate({ scale: 1,rotate:0 }, 200, function () {
.animate({ scale: 1.4, rotate: -30, }, 50)//skew(10deg, 10deg)
.animate({ scale: 1.4, rotate: 30, }, 20)//skew(10deg, 10deg)
.animate({ scale: 1, rotate: 0 }, 200, function () {
if (lock) {
tais.find('.select-num').html('+' + tais.data('total-num').number).hide().fadeIn(200)
}
@@ -1019,7 +1019,7 @@ $(function () {
$('.recharge').click(function () {
// if (browser.app) {
// if (browser.ios) {
// window.location.href = 'https://api.pekolive.com/peko/modules/pay/index.html?channelType=4';
// window.location.href = 'http://192.168.0.19:5502/view/peko/modules/pay/index.html?channelType=4';
// } else {
// if (browser.android) {
// let channel = pubInfo.deviceInfo.channel
@@ -1141,68 +1141,7 @@ $(function () {
$('.shade-content-rank').on('click', function (e) {
e.stopPropagation()
})
// 監聽滾動
// $('.other-rank').on('scroll', function () {
// let scrollTop = $(this).scrollTop();//這是已經卷進去滾動條的的高度
// let scrollHeight = $('.other-rank')[0].scrollHeight;//這個是other-rank包含滾動條的總高度
// let ulHeight = $(this).innerHeight();//這個是other-rank的高度
// //這樣距離到底還有一段距離就請求，但是會導致重復請求，所以要加鎖限製
// if (scrollTop + ulHeight + 100 >= scrollHeight) {
// if (type === 1) {
// if (isLockD) {
// isLockD = false
// pageD++
// if (pageSize * pageD > 30) {
// toastMsg('沒有更多數據啦~')
// } else {
// if (canRequsetNextPageD) {
// getListRank(type, pageD);
// } else {
// toastMsg('沒有更多數據啦~')
// }
// }
// } else {
// if (scrollTop + ulHeight >= scrollHeight) {
// if (pageSize * pageD > 30) {
// toastMsg('沒有更多數據啦~')
// }
// }
// }
// } else {
// if (isLockN) {
// isLockN = false
// pageN++
// if (pageSize * pageN > 30) {
// toastMsg('沒有更多數據啦~')
// } else {
// if (canRequsetNextPageN) {
// getListRank(type, pageN);
// } else {
// toastMsg('沒有更多數據啦')
// }
// }
// } else {
// if (scrollTop + ulHeight >= scrollHeight) {
// if (pageSize * pageN > 30) {
// toastMsg('沒有更多數據啦~')
// }
// }
// }
// }
// }
// })
// 播放3s動畫
// let player1 = new SVGA.Player('.draw-time');
// let parser1 = new SVGA.Parser('.draw-time');
// parser1.load('./images/draw.svga', function (videoItem) {
// // player.loops = 2;
// player1.clearsAfterStop = false;
// player1.setVideoItem(videoItem);
// player1.startAnimation();
// })
// 点击跳转个人主页
// $('.draw-time .top-three .top-three-list .no').off()
$('.draw-time .top-three .top-three-list .no').click(function () {
@@ -1297,6 +1236,7 @@ $(function () {
$countDown.html(countDownTime)
}
})
})
//返回页面 重新请求接口
var hiddenProperty = 'hidden' in document ? 'hidden' :
@@ -1309,4 +1249,4 @@ var onVisibilityChange = function () {
location.reload()
}
}
document.addEventListener(visibilityChangeEvent, onVisibilityChange);
document.addEventListener(visibilityChangeEvent, onVisibilityChange);