feat: 优化图片加载

This commit is contained in:
alger
2024-12-15 14:13:13 +08:00
parent 51f67bb2c2
commit 100268448a
6 changed files with 23 additions and 49 deletions
+4 -28
View File
@@ -8,7 +8,8 @@
<!-- SEO 元数据 --> <!-- SEO 元数据 -->
<title>网抑云音乐 | AlgerKong AlgerMusicPlayer</title> <title>网抑云音乐 | AlgerKong AlgerMusicPlayer</title>
<meta name="description" content="AlgerMusicPlayer 网抑云音乐 基于 网易云音乐API 的一款免费的在线音乐播放器,支持在线播放、歌词显示、音乐下载等功能。提供海量音乐资源,让您随时随地享受音乐。" /> <meta name="description"
content="AlgerMusicPlayer 网抑云音乐 基于 网易云音乐API 的一款免费的在线音乐播放器,支持在线播放、歌词显示、音乐下载等功能。提供海量音乐资源,让您随时随地享受音乐。" />
<meta name="keywords" content="AlgerMusic, AlgerMusicPlayer, 网抑云, 音乐播放器, 在线音乐, 免费音乐, 歌词显示, 音乐下载, AlgerKong, 网易云音乐" /> <meta name="keywords" content="AlgerMusic, AlgerMusicPlayer, 网抑云, 音乐播放器, 在线音乐, 免费音乐, 歌词显示, 音乐下载, AlgerKong, 网易云音乐" />
<!-- 作者信息 --> <!-- 作者信息 -->
@@ -45,37 +46,12 @@
<body> <body>
<div id="app"></div> <div id="app"></div>
<div style="display: none;"> <div style="display: none;">
Total Page View <span id="vercount_value_page_pv">Loading</span> Total Page View <span id="vercount_value_page_pv">Loading</span>
Total Visits <span id="vercount_value_site_pv">Loading</span> Total Visits <span id="vercount_value_site_pv">Loading</span>
Site Total Visitors <span id="vercount_value_site_uv">Loading</span> Site Total Visitors <span id="vercount_value_site_uv">Loading</span>
</div> </div>
<!-- 收款码图片预加载 -->
<link rel="preload" as="image" href="https://github.com/algerkong/algerkong/blob/main/alipay.jpg?raw=true" />
<link rel="preload" as="image" href="https://github.com/algerkong/algerkong/blob/main/wechat.jpg?raw=true" />
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
<!-- 结构化数据 -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "网抑云音乐",
"applicationCategory": "MultimediaApplication",
"operatingSystem": "Web, Windows, MacOS",
"author": {
"@type": "Person",
"name": "AlgerKong",
"url": "https://github.com/algerkong"
},
"description": "一款免费的在线音乐播放器,支持在线播放、歌词显示、音乐下载等功能。",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "CNY"
}
}
</script>
</body> </body>
</html> </html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

+3 -3
View File
@@ -13,13 +13,13 @@
</template> </template>
<div class="p-6 bg-black rounded-lg shadow-lg"> <div class="p-6 bg-black rounded-lg shadow-lg">
<div class="flex gap-6"> <div class="flex gap-10">
<div class="flex flex-col items-center gap-2"> <div class="flex flex-col items-center gap-2">
<n-image :src="alipayQR" alt="支付宝收款码" class="w-32 h-32 rounded-lg" preview-disabled /> <n-image :src="alipayQR" alt="支付宝收款码" class="w-32 h-32 rounded-lg cursor-none" preview-disabled />
<span class="text-sm text-gray-100">支付宝</span> <span class="text-sm text-gray-100">支付宝</span>
</div> </div>
<div class="flex flex-col items-center gap-2"> <div class="flex flex-col items-center gap-2">
<n-image :src="wechatQR" alt="微信收款码" class="w-32 h-32 rounded-lg" preview-disabled /> <n-image :src="wechatQR" alt="微信收款码" class="w-32 h-32 rounded-lg cursor-none" preview-disabled />
<span class="text-sm text-gray-100">微信支付</span> <span class="text-sm text-gray-100">微信支付</span>
</div> </div>
</div> </div>
+3 -4
View File
@@ -35,10 +35,7 @@
/> />
<div v-else class="mx-2 rounded-full cursor-pointer text-sm" @click="toLogin">登录</div> <div v-else class="mx-2 rounded-full cursor-pointer text-sm" @click="toLogin">登录</div>
</div> </div>
<coffee <coffee :alipay-q-r="alipay" :wechat-q-r="wechat">
alipay-q-r="https://github.com/algerkong/algerkong/blob/main/alipay.jpg?raw=true"
wechat-q-r="https://github.com/algerkong/algerkong/blob/main/wechat.jpg?raw=true"
>
<div class="github" @click="toGithub"> <div class="github" @click="toGithub">
<i class="ri-github-fill"></i> <i class="ri-github-fill"></i>
</div> </div>
@@ -52,6 +49,8 @@ import { useStore } from 'vuex';
import { getSearchKeyword } from '@/api/home'; import { getSearchKeyword } from '@/api/home';
import { getUserDetail, logout } from '@/api/login'; import { getUserDetail, logout } from '@/api/login';
import alipay from '@/assets/alipay.png';
import wechat from '@/assets/wechat.png';
import Coffee from '@/components/Coffee.vue'; import Coffee from '@/components/Coffee.vue';
import { SEARCH_TYPES, USER_SET_OPTIONS } from '@/const/bar-const'; import { SEARCH_TYPES, USER_SET_OPTIONS } from '@/const/bar-const';
import { getImgUrl } from '@/utils'; import { getImgUrl } from '@/utils';
+6 -7
View File
@@ -63,12 +63,12 @@
<div class="p-6 bg-black rounded-lg shadow-lg mt-20"> <div class="p-6 bg-black rounded-lg shadow-lg mt-20">
<div class="text-gray-100 text-base text-center">支持作者</div> <div class="text-gray-100 text-base text-center">支持作者</div>
<div class="flex gap-60"> <div class="flex gap-60">
<div class="flex flex-col items-center gap-2 cursor-pointer hover:scale-[2] transition-all z-10 bg-black"> <div class="flex flex-col items-center gap-2 cursor-none hover:scale-[2] transition-all z-10 bg-black">
<n-image :src="alipayQR" alt="支付宝收款码" class="w-32 h-32 rounded-lg" preview-disabled /> <n-image :src="alipay" alt="支付宝收款码" class="w-32 h-32 rounded-lg" preview-disabled />
<span class="text-sm text-gray-100">支付宝</span> <span class="text-sm text-gray-100">支付宝</span>
</div> </div>
<div class="flex flex-col items-center gap-2 cursor-pointer hover:scale-[2] transition-all z-10 bg-black"> <div class="flex flex-col items-center gap-2 cursor-none hover:scale-[2] transition-all z-10 bg-black">
<n-image :src="wechatQR" alt="微信收款码" class="w-32 h-32 rounded-lg" preview-disabled /> <n-image :src="wechat" alt="微信收款码" class="w-32 h-32 rounded-lg" preview-disabled />
<span class="text-sm text-gray-100">微信支付</span> <span class="text-sm text-gray-100">微信支付</span>
</div> </div>
</div> </div>
@@ -82,15 +82,14 @@ import { computed, ref } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import config from '@/../package.json'; import config from '@/../package.json';
import alipay from '@/assets/alipay.png';
import wechat from '@/assets/wechat.png';
import store from '@/store'; import store from '@/store';
defineOptions({ defineOptions({
name: 'Setting', name: 'Setting',
}); });
const alipayQR = 'https://github.com/algerkong/algerkong/blob/main/alipay.jpg?raw=true';
const wechatQR = 'https://github.com/algerkong/algerkong/blob/main/wechat.jpg?raw=true';
const isElectron = ref((window as any).electronAPI !== undefined); const isElectron = ref((window as any).electronAPI !== undefined);
const router = useRouter(); const router = useRouter();