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