liuxiang/faceFamilySource
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化图片加载

Browse Source
This commit is contained in:
xiaoaojiao
2025-09-18 00:00:13 +08:00
parent 3d75028615
commit 5f63d4bd1a
4 changed files with 20 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
index.html
View File

@@ -71,11 +71,20 @@
background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='80px' height='80px' viewBox='0 0 80 80' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Eloading%3C/title%3E%3Cdefs%3E%3ClinearGradient x1='94.0869141%25' y1='0%25' x2='94.0869141%25' y2='90.559082%25' id='linearGradient-1'%3E%3Cstop stop-color='%23ededed' stop-opacity='0' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23ededed' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3ClinearGradient x1='100%25' y1='8.67370605%25' x2='100%25' y2='90.6286621%25' id='linearGradient-2'%3E%3Cstop stop-color='%23ededed' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23ededed' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.9'%3E%3Cg%3E%3Cpath d='M40,0 C62.09139,0 80,17.90861 80,40 C80,62.09139 62.09139,80 40,80 L40,73 C58.2253967,73 73,58.2253967 73,40 C73,21.7746033 58.2253967,7 40,7 L40,0 Z' fill='url(%23linearGradient-1)'%3E%3C/path%3E%3Cpath d='M40,0 L40,7 C21.7746033,7 7,21.7746033 7,40 C7,58.2253967 21.7746033,73 40,73 L40,80 C17.90861,80 0,62.09139 0,40 C0,17.90861 17.90861,0 40,0 Z' fill='url(%23linearGradient-2)'%3E%3C/path%3E%3Ccircle id='Oval' fill='%23ededed' cx='40.5' cy='3.5' r='3.5'%3E%3C/circle%3E%3C/g%3E%3CanimateTransform attributeName='transform' begin='0s' dur='1s' type='rotate' values='0 40 40;360 40 40' repeatCount='indefinite'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat center center; background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='80px' height='80px' viewBox='0 0 80 80' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Eloading%3C/title%3E%3Cdefs%3E%3ClinearGradient x1='94.0869141%25' y1='0%25' x2='94.0869141%25' y2='90.559082%25' id='linearGradient-1'%3E%3Cstop stop-color='%23ededed' stop-opacity='0' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23ededed' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3ClinearGradient x1='100%25' y1='8.67370605%25' x2='100%25' y2='90.6286621%25' id='linearGradient-2'%3E%3Cstop stop-color='%23ededed' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23ededed' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.9'%3E%3Cg%3E%3Cpath d='M40,0 C62.09139,0 80,17.90861 80,40 C80,62.09139 62.09139,80 40,80 L40,73 C58.2253967,73 73,58.2253967 73,40 C73,21.7746033 58.2253967,7 40,7 L40,0 Z' fill='url(%23linearGradient-1)'%3E%3C/path%3E%3Cpath d='M40,0 L40,7 C21.7746033,7 7,21.7746033 7,40 C7,58.2253967 21.7746033,73 40,73 L40,80 C17.90861,80 0,62.09139 0,40 C0,17.90861 17.90861,0 40,0 Z' fill='url(%23linearGradient-2)'%3E%3C/path%3E%3Ccircle id='Oval' fill='%23ededed' cx='40.5' cy='3.5' r='3.5'%3E%3C/circle%3E%3C/g%3E%3CanimateTransform attributeName='transform' begin='0s' dur='1s' type='rotate' values='0 40 40;360 40 40' repeatCount='indefinite'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat center center;
background-size: 10% 10%; background-size: 10% 10%;
} }
.preload{
display: none;
}
</style> </style>
<link rel="stylesheet" href="https://res.wx.qq.com/t/wx_fed/weui-source/res/2.6.16/weui.min.css"> <link rel="stylesheet" href="https://res.wx.qq.com/t/wx_fed/weui-source/res/2.6.16/weui.min.css">
</head> </head>
<body> <body>
<div class="preload">
<img src="./src/assets/images/generate/select-template-bg.webp" alt="">
<img src="./src/assets/images/generate/generate-img-bg.webp" alt="">
<img src="./src/assets/images/generate/photo-squarev2.webp" alt="">
<img src="./src/assets/images/generate/my-photov2.webp" alt="">
</div>
<div id="app"></div> <div id="app"></div>
<script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.6.2.js"></script> <script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.6.2.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/t/wx_fed/weui.js/res/1.2.19/weui.min.js"></script> <script type="text/javascript" src="https://res.wx.qq.com/t/wx_fed/weui.js/res/1.2.19/weui.min.js"></script>

2
src/components/MyPhoto.vue
View File

@@ -147,7 +147,7 @@ const getGenerateImgStatus = async (item)=> {
const getBackgroundImage = (item) => { const getBackgroundImage = (item) => {
if (item.result_url) { if (item.result_url) {
return item.result_url; return `${item.result_url}?x-oss-process=image/resize,w_400/format,webp/quality,q_80`;
} else { } else {
return item.result_url = failedImg; return item.result_url = failedImg;
} }

2
src/components/PhotoSquare.vue
View File

@@ -145,7 +145,7 @@ markers.value = [
const getBackgroundImage = (item) => { const getBackgroundImage = (item) => {
if (item.result_url) { if (item.result_url) {
return item.result_url; return `${item.result_url}?x-oss-process=image/resize,w_400/format,webp/quality,q_80`;
} }
}; };

14
src/components/PrizeList.vue
View File

@@ -59,7 +59,7 @@ const handleItemBtn = (id, event) => {
} }
</script> </script>
<style scoped> <style>
.prizelist { .prizelist {
position: relative; position: relative;
width: 100vw; width: 100vw;
@@ -139,15 +139,19 @@ const handleItemBtn = (id, event) => {
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100%; background-size: 100%;
} }
wx-open-launch-weapp{
width: 100%;
height: 100%;
}
.btn-goto wx-open-launch-weapp {
display: block;
}
wx-open-launch-weapp, wx-open-launch-weapp,
.btn-goto.noaddress wx-open-launch-weapp { .btn-goto.noaddress wx-open-launch-weapp {
display: none; display: none;
} }
.btn-goto wx-open-launch-weapp {
display: block;
}
.btn-goto.noaddress { .btn-goto.noaddress {
background-image: url("../assets/images/btn-address.webp"); background-image: url("../assets/images/btn-address.webp");