Skip to content

Y
Yz Music

zacharyzlj / Yz Music

通知 1
Star 0
Fork 0
Y
Yz Music

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 f90b6956 编写于 作者: Z Zachary
浏览文件
操作

feat: add image lazy load

上级 a73f0849
隐藏空白更改
内联 并排
Showing with 89 addition and 104 deletion
demo/demo.gif
查看替换文件 @ a73f0849 浏览文件 @ f90b6956
demo/demo.gif

3.6 MB | W: | H:

demo/demo.gif

4.2 MB | W: | H:

demo/demo.gif
demo/demo.gif
demo/demo.gif
demo/demo.gif
  • 2-up
  • Swipe
  • Onion skin
public/favicon.ico
查看替换文件 @ a73f0849 浏览文件 @ f90b6956
public/favicon.ico

4.2 KB | W: | H:

public/favicon.ico

4.2 KB | W: | H:

public/favicon.ico
public/favicon.ico
public/favicon.ico
public/favicon.ico
  • 2-up
  • Swipe
  • Onion skin
public/index.html
浏览文件 @ f90b6956
......@@ -4,7 +4,7 @@
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.jpeg" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
......
src/assets/css/fakeqqmusic.scss
浏览文件 @ f90b6956
......@@ -1396,22 +1396,25 @@ img .playlist__pic {
margin-left: auto;
margin-right: auto;
}
.singer_list__cover,
.singer_list__pic {
display: block;
width: 140px;
height: 140px;
border-radius: 126px;
}
.singer_list__title {
font-size: 16px;
font-weight: 400;
.singer_list__item_box {
position: relative;
margin-right: 20px;
background-color: #fbfbfd;
min-height: 195px;
padding: 25px 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
zoom: 1;
*width: 100%;
margin: 20px 30px 4px;
.singer_list__title {
font-size: 16px;
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
zoom: 1;
*width: 100%;
margin: 20px 30px 4px;
min-width: 0;
padding-left: 5px;
}
}
.singer_list__user_txt {
color: #999;
......
src/common/lazy-load.js 0 → 100644
浏览文件 @ f90b6956
const lazyLoad = {
mounted(el, binding) {
let io = new IntersectionObserver(entries => {
entries.forEach(entry => {
let lazyImage = entry.target;
if (entry.intersectionRatio > 0) {
lazyImage.src = binding.value;
io.unobserve(lazyImage);
}
});
});
io.observe(el);
}
};
let LazyPlugin = {};
LazyPlugin.install = Vue => {
Vue.directive("lazy", lazyLoad);
};
export default LazyPlugin;
src/components/common/Banner.vue
浏览文件 @ f90b6956
......@@ -11,7 +11,12 @@
:key="banner.targetId"
:lable="banner.typeTitle"
>
<img :src="banner.imageUrl" :alt="banner.typeTitle" class="banner-img" />
<img
src=""
v-lazy="banner.imageUrl"
:alt="banner.typeTitle"
class="banner-img"
/>
</el-carousel-item>
</el-carousel>
</template>
......
src/components/common/DetailLists.vue
浏览文件 @ f90b6956
......@@ -19,9 +19,9 @@
><img
class="playlist__pic"
style="display: block; visibility: visible"
onerror="this.src='//y.gtimg.cn/mediastyle/global/img/album_300.png?max_age=31536000';this.onerror=null;"
src="//y.gtimg.cn/mediastyle/global/img/album_300.png?max_age=31536000"
v-lazy="l.img"
:alt="l.name"
:src="l.img"
/></a>
</div>
<h4 class="playlist__title">
......
src/components/common/RecommendedBar.vue
浏览文件 @ f90b6956
......@@ -30,9 +30,9 @@
<div class="playlist__cover mod_cover">
<a class="js_playlist" @click="playTheList(item.id)">
<img
onerror="this.src='//y.gtimg.cn/mediastyle/global/img/playlist_300.png?max_age=31536000';this.onerror=null;"
class="playlist__pic"
:src="item.coverImgUrl"
src="//y.gtimg.cn/mediastyle/global/img/playlist_300.png?max_age=31536000"
v-lazy="item.coverImgUrl"
:alt="item.name"
/><i class="mod_cover__mask"></i
><i class="mod_cover__icon_play js_play"></i>
......
src/components/common/ShowMvs.vue
浏览文件 @ f90b6956
......@@ -12,9 +12,9 @@
<img
class="mv_list__pic"
style="display: block; visibility: visible"
onerror="this.src='//y.gtimg.cn/mediastyle/global/img/mv_300.png?max_age=31536000';this.onerror=null;"
src="//y.gtimg.cn/mediastyle/global/img/mv_300.png?max_age=31536000"
v-lazy="mv.img"
:alt="mv.name"
:src="mv.img"
/>
<i class="mod_cover__icon_play"></i>
<!--div class="mv_list__time">04:10</div-->
......
src/components/content/Player.vue
浏览文件 @ f90b6956
......@@ -42,7 +42,7 @@
>
</div>
<div class="head j-flag">
<img v-if="hasCurrentSong" :src="currentSong.img" />
<img v-if="hasCurrentSong" v-lazy="currentSong.img" src="" />
<a hidefocus="true" class="mask"></a>
</div>
<div class="play">
......
src/main.js
浏览文件 @ f90b6956
......@@ -8,11 +8,13 @@ import ElementPlus from "element-plus";
import "element-plus/lib/theme-chalk/index.css";
import "@/assets/css/base.scss";
import "@/assets/css/fakeqqmusic.scss";
import LazyPlugin from "common/lazy-load";
createApp(App)
.use(store)
.use(router)
.use(ElementPlus)
.use(LazyPlugin)
.mount("#app");
// import { getBanner } from "./api";
......
src/views/My.vue
浏览文件 @ f90b6956
......@@ -19,8 +19,8 @@
<div class="section_inner">
<div class="profile__cover_link">
<img
onerror="this.src='//y.gtimg.cn/mediastyle/global/img/person_300.png?max_age=31536000';this.onerror=null;"
:src="$store.state.user.user.avatarUrl"
src="//y.gtimg.cn/mediastyle/global/img/person_300.png?max_age=31536000"
v-lazy="$store.state.user.user.avatarUrl"
alt="$store.state.user.user.nickname"
class="profile__cover"
id="profileHead"
......
src/views/musicLibrary/Classified.vue
浏览文件 @ f90b6956
......@@ -130,8 +130,8 @@
><img
class="playlist__pic"
style="display: block; visibility: visible"
onerror="this.src='//y.gtimg.cn/mediastyle/global/img/cover_playlist.png?max_age=31536000';this.onerror=null;"
:src="list.img"
src="//y.gtimg.cn/mediastyle/global/img/cover_playlist.png?max_age=31536000"
v-lazy="list.img"
:alt="list.name"
/>
<i class="mod_cover__icon_play js_play"></i>
......
src/views/musicLibrary/MV.vue
浏览文件 @ f90b6956
......@@ -48,7 +48,8 @@
<img
style="display: block; visibility: visible"
class="mv_list__pic"
:src="item.cover"
src="//y.gtimg.cn/mediastyle/global/img/mv_300.png?max_age=31536000"
v-lazy="item.cover"
:alt="item.name"
/>
<i class="mod_cover__icon_play"></i>
......
src/views/musicLibrary/NewDisc.vue
浏览文件 @ f90b6956
......@@ -27,8 +27,8 @@
>
<a class="js_album">
<img
onerror="this.src='//y.gtimg.cn/mediastyle/global/img/album_300.png?max_age=31536000';this.onerror=null;"
:src="album.img"
src="//y.gtimg.cn/mediastyle/global/img/album_300.png?max_age=31536000"
v-lazy="album.img"
:alt="album.name"
class="playlist__pic"
style="display: block; visibility: visible"
......
src/views/musicLibrary/Ranking.vue
浏览文件 @ f90b6956
......@@ -179,7 +179,8 @@
<img
class="songlist__pic"
style="display: block; visibility: visible"
:src="song.img"
src=""
v-lazy="song.img"
:alt="song.name"
/>
</a>
......
src/views/musicLibrary/SearchResultDetail.vue
浏览文件 @ f90b6956
......@@ -50,9 +50,9 @@
<img
class="singer_list__pic"
style="display: block; visibility: visible"
onerror="this.src='//y.gtimg.cn/mediastyle/global/img/person_300.png?max_age=31536000';this.onerror=null;"
src="//y.gtimg.cn/mediastyle/global/img/person_300.png?max_age=31536000"
v-lazy="user.img"
:alt="user.name"
:src="user.img"
/>
</a>
</div>
......
src/views/musicLibrary/SongDetail.vue
浏览文件 @ f90b6956
......@@ -46,7 +46,8 @@
<div class="playlist__cover mod_cover">
<a class="js_playlist" @click="gotoSongDetail(simiSong.id)">
<img
:src="simiSong.img"
src=""
v-lazy="simiSong.img"
:alt="simiSong.name"
class="playlist__pic"
/>
......@@ -77,9 +78,9 @@
<a class="mv_list__cover mod_cover js_mv" hidefocus="true">
<img
class="mv_list__pic"
:src="mv.img"
onerror="this.src='//y.gtimg.cn/mediastyle/global/img/mv_300.png?max_age=31536000';this.onerror=null;"
alt="{{mv.name}}"
src="//y.gtimg.cn/mediastyle/global/img/mv_300.png?max_age=31536000"
v-lazy="mv.img"
:alt="mv.name"
/>
<i class="mod_cover__icon_play"></i>
</a>
......
src/views/musicLibrary/SongerDetail.vue
浏览文件 @ f90b6956
......@@ -32,8 +32,8 @@
<a class="js_album">
<img
class="playlist__pic"
onerror="this.src='//y.gtimg.cn/mediastyle/global/img/album_300.png?max_age=31536000';this.onerror=null;"
:src="album.img"
src="//y.gtimg.cn/mediastyle/global/img/album_300.png?max_age=31536000"
v-lazy="album.img"
:alt="album.name"
/>
<i
......@@ -76,8 +76,8 @@
<a class="mv_list__cover mod_cover js_mv" hidefocus="true">
<img
class="mv_list__pic"
onerror="this.src='//y.gtimg.cn/mediastyle/global/img/mv_300.png?max_age=31536000';this.onerror=null;"
:src="mv.img"
src="//y.gtimg.cn/mediastyle/global/img/mv_300.png?max_age=31536000"
v-lazy="mv.img"
:alt="mv.name"
/>
<i class="mod_cover__icon_play"></i>
......@@ -118,8 +118,8 @@
>
<img
class="singer_list__pic"
onerror="this.src='//y.gtimg.cn/mediastyle/global/img/singer_300.png?max_age=31536000';this.onerror=null;"
:src="songer.img"
src="//y.gtimg.cn/mediastyle/global/img/singer_300.png?max_age=31536000"
v-lazy="songer.img"
:alt="songer.name"
/>
</a>
......@@ -175,7 +175,7 @@ import {
createSimiSonger,
createUser,
createSong,
createAlbum,
createAlbums,
createMvs,
playSonglist,
gotoSongerDetail,
......@@ -229,23 +229,12 @@ export default {
// Get songer album
const res4 = await getSongerAlbums({ id: this.id, limit: 5, offset: 0 });
console.log(res4);
this.albums = res4.data.hotAlbums.map(
({ id, name, publishTime, artists, picUrl }) => {
return createAlbum({
id,
name,
img: picUrl,
artists,
publishTime,
});
}
);
this.albums = createAlbums(res4.data.hotAlbums);
console.log(this.albums);
// Get songer mv
const res5 = await getSongerMvs(this.id);
console.log(res5);
let mvs = createMvs(res5.data.mvs);
console.log(mvs);
this.mvs = mvs.length > 5 ? mvs.slice(0, 5) : mvs;
},
playHotSongs() {
......@@ -283,30 +272,11 @@ export default {
</script>
<style scoped>
blockquote,
body,
button,
dd,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
html,
input,
lengend,
li,
ol,
p,
pre,
td,
textarea,
th,
ul {
margin: 0;
......@@ -353,16 +323,6 @@ ul {
.mod_part .playlist__item {
padding-bottom: 0;
}
.mv_list__list {
margin-right: -20px;
zoom: 1;
}
.mv_list__item {
float: left;
width: 25%;
padding-bottom: 44px;
overflow: hidden;
}
.mod_singer_list {
overflow: hidden;
......@@ -381,23 +341,13 @@ ul {
margin-bottom: 20px;
overflow: hidden;
}
.singer_list__item_box {
position: relative;
margin-right: 20px;
background-color: #fbfbfd;
min-height: 195px;
padding: 25px 0;
overflow: hidden;
}
.singer_list__title {
font-size: 16px;
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
zoom: 1;
*width: 100%;
margin: 20px 30px 4px;
.singer_list__cover,
.singer_list__pic {
float: none;
display: block;
width: 140px;
height: 140px;
border-radius: 126px;
}
.mod_mv {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或