优化图片加载过慢问题
This commit is contained in:
Dragon
BIN
view/peko/activity/act-ocean/images/1.png
Normal file
BIN
view/peko/activity/act-ocean/images/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
BIN
view/peko/activity/act-ocean/images/2.png
Normal file
BIN
view/peko/activity/act-ocean/images/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
view/peko/activity/act-ocean/images/3.png
Normal file
BIN
view/peko/activity/act-ocean/images/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
view/peko/activity/act-ocean/images/4.png
Normal file
BIN
view/peko/activity/act-ocean/images/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
view/peko/activity/act-ocean/images/5.png
Normal file
BIN
view/peko/activity/act-ocean/images/5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
view/peko/activity/act-ocean/images/6.png
Normal file
BIN
view/peko/activity/act-ocean/images/6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
view/peko/activity/act-ocean/images/7.png
Normal file
BIN
view/peko/activity/act-ocean/images/7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
view/peko/activity/act-ocean/images/8.png
Normal file
BIN
view/peko/activity/act-ocean/images/8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
@@ -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>
|
||||
<!-- 中奖物品展示 -->
|
||||
|
||||
@@ -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' :
|
||||
|
||||
Reference in New Issue
Block a user